假设我有一个父组件和两个子组件:
const Parent = () => {
const [myVar, setmyVar] = useState(false)
return (
<>
<MyChildComponent1 myVar={myVar} setMyVar={setMyVar} \>
<MyChildComponent2 myVar={myVar} \>
</>
)
}
现在,如何在MyChildComponent2
中正确设置类型呢?
这是我目前的想法
const MyChildComponent1 = (
{myVar, setMyVar}:
{myVar: boolean, setMyVar: (value: boolean) => void}) = (...)
setMyvar
的类型是否正确?或者应该是其他类型?
6条答案
按热度按时间ycggw6v21#
与调用
useState
返回的函数匹配的类型为:如果我们查看
DefinitelyTyped
[1]中的类型定义文件,我们可以看到返回类型中的第二个类型是分派:因此,提供的泛型型别会传递至
SetStateAction<S>
,其定义如下:因此,组件的接口基本上如下所示:
正如@Retsam所说,最好使用React的导出类型:
参考文献:[1]https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L845
myzjeezk2#
分派和设定状态动作型别
正如@Retsam提到的,您还可以导入和使用React中的
Dispatch
和SetStateAction
类型:奖金
当我发现自己经常使用这种方法时,我会创建一个类型别名来帮助提高可读性
希望这对你有帮助。
aor9mmx13#
再加上@fiz的评论,他的block代码对我来说有点不起作用:
我不得不设置
setMyVar: Dispatch<SetStateAction<boolean>>
(括号太多)wqnecbli4#
也可以像这样使用Interface和React组件来完成。
主组件.tsx
Main中定义的useState组件的赋值在子组件中完成,当该字段被触发时,将运行useEffect中的代码。
子组件.tsx
lnlaulya5#
我的子组件1.tsx
设置类型属性如下:
从“react”导入React
类型属性= {
myVar:布尔值;
第一步:在第一步中,将第一步中的所有操作都分配给第二步中的操作。
上
我的子组件常量=({我的变量,设置我的变量}:道具)=〉{
...您的密码...
}
pinkon5k6#
我发现其他的答案有点令人困惑,所以以下是对我有效的答案:
在parent.ts中示例化useState():
将setSomeState()传递给child.ts:
在child.ts中设置这样的Props: