如何在TypeScrips和react中通过带有接口的props发送usestate ?

Question

我想做一个明亮/黑暗的主题。我有两个分量。第一个组件如下所示。我成功了一个布尔值来改变我的风格我的组件。到目前为止还不错:

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={()=>setLightMode(!light)}当我从下面切换按钮在我的Home组件中工作

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>

要排序。我只想在我的Home组件中使用Theme组件中的light setlightTheme布尔状态。我不知道如何在TypeScript中使用props来发送这个…

这是我的代码打印:在这里输入链接描述

Answer 1

我不确定我是否理解正确，但我认为您的目标是将onChange函数从父组件传递给Theme组件。如果是这样，我希望这个片段可以帮助你。基本上，我在接口中添加了onChange参数作为一个函数。我还将主题参数重命名为dark。为了使这两个组件协同工作，我删除了Theme组件中的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>
);
};

Answer 2

所以如果我理解正确的话，您只是想提供一个切换明暗模式的选项。从体系结构的角度来看，您不希望在组件级别这样做，因为多个组件可能需要更改。

本错误在我给出一个正确的解决方案之前，你现在正在用这一行做一个BEM错误:

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

修饰符--modifier只能与实际元素card共存。因此，在完全输出的HTML中，这是有效的card__light card__light--active，但在您的示例中，card__light或card__light--active正在呈现。

主题切换解决方案

当涉及到切换暗/亮主题时，你要么想通过使用Redux之类的东西使这个值(true或false)在集中状态下可用，要么你可能想在根组件上声明它(最常见的是<App />)并从那里开始使用它。

我不建议在这个用例中使用prop钻取，因为从长远来看，它会使你的代码变得混乱。这是Context API的一个很好的用例。

✅参见工作示例Playground。

注。我使用Typescript是为了更好的代码，你可以忽略你不知道的语法。

反应文档React文档中有一个确切的例子，你可以看到docs主题切换。