如何通过带有TypeScrips界面的道具发送usestate并作出反应？

Question

我正在尝试做一个浅色/深色的主题。我有两个组件。第一个组件如下所示。我成功地创建了一个布尔值来更改组件中的样式。到目前为止还不错：

js lang-js prettyprint-override">export interface  Props{

  theme:boolean;

}

const Theme: FC<Props> = ({theme}) => {
  const [light,setLightMode]=useState(false);
  return (
    <div>
      <div className="card__theme">
        <div className={light ? "card__light" : "card__light--active"}>Light</div>
        <Switch inputProps={{ "aria-label": "controlled" }} onChange={()=>setLightMode(!light)}/>
        <div className={ light ? "card__Dark" : "card__Dark--active"}>Dark</div>
      </div>
    </div>
  );
};

我现在要做的就是在我的主页上使用这个组件，我想在这里做同样的事情。我想改变我的组件的样式，使2个类名像上面的代码一样具有布尔状态。我面临的问题是，我无法在我的主组件中生成另一个onChange={}函数。首先，我不在接口中发送函数。我想要我的const[light，setLightMode]=useState（false）；我的函数onChange={（）=

const Home: FC = () => {
  const percentage = 91;
  const [dark,setDark] = useState(false);

  return (
    <div>2
      <div className="Container-body">
        <div className="card">
          <div className={dark ? "card__theme" : "card__theme--active"}>
            <Theme theme={dark} onChange={()=>{setDark(!dark)}}/>
          </div>

所以，让它排序。我只想在我的主组件中使用我的主题组件中的light、setlightTheme布尔状态。我不知道我怎么能用打字稿发送这个道具。。。

这是一个带有我的代码的打印：在这里输入链接描述

Answer 1

所以如果我理解正确的话，你只需要提供一个选项来切换明暗模式。从架构的角度来看，您不希望在组件级别执行此操作，因为多个组件可能需要更改。

在我提出正确的解决方案之前，您目前在这一行中犯了一个BEM错误：

 <div className={dark ? 'card__light' : 'card__light--active'}>

修饰符--修饰符只能与实际元素卡一起存在。因此，在完全输出的超文本标记语言上，这是有效的card__lightcard__light--active，但是在您的示例中，要么是card__light，要么是card__light--active正在呈现。

当切换一个暗/亮主题时，你要么想通过使用像Redux这样的东西使这个值（真或假）在集中状态下可用，要么你可能想在你的根组件上声明它（通常是

我不建议在这个用例中使用prop-drilling，因为从长远来看，它会使代码变得混乱。这是一个非常好的上下文API用例。

✅参见工作示例Playground。

另外，我使用Typescript来获得更好的代码，你可以忽略你不知道的语法。

React文档中有一个确切的示例，您可以看到文档主题切换。

Answer 2

我不确定我是否理解正确，但我认为您的目标是将onChange函数从父组件传递给主题组件。如果是这样的话，我希望这个片段可以帮助你。基本上，我在接口中添加了onChange参数作为函数。我还将theme参数重命名为dark。为了使这两个组件协同工作，我删除了主题组件中的useState，并使用dark变量（取自父组件）来管理样式。

export interface Props {
  dark: boolean;
  onChange?: () => void;
}

const Theme: FC<Props> = ({ dark, onChange }) => {
  return (
    <div>
      <div className="card__theme">
        <div className={dark ? 'card__light' : 'card__light--active'}>
          Light
        </div>
        <Switch
          inputProps={{ 'aria-label': 'controlled' }}
          onChange={onChange}
        />
        <div className={!dark ? 'card__Dark' : 'card__Dark--active'}>Dark</div>
      </div>
    </div>
  );
};