我有多个页面,它们都有不同类型的useState:
//Page 1 ...
const [ShoppingListKey, setShoppingListKey] = useState<keyof ShoppingList>();
//Page 2 ...
const [isTrue, setIsTrue] = useState<boolean>(false);
//Page 3 ...
const [String, setString] = useState<string>('');
所以,我有一个组件,我想让它做的是从其父组件中获取目标状态值,并将其父组件的状态设置为目标值:
interface ChildProps {
targetStateValue: keyof ShoppingList | boolean | string | undefined;
setStateFunc: Dispatch<React.SetStateAction<keyof ShoppingList | boolean | string | undefined>>
}
export const Child = ({targetStateValue, setStateFunc}: ChildProps) => {
<button OnClick={()=>{setStateFunc(targetStateValue);}}>BUTTON</button>
}
在ShoppingList父级中:
<Child
setStateFunc={setShoppingListKey} //ERROR
targetStateValue={something}
/>
The Error说道:类型'Dispatch〈SetStateAction〈keyof ShoppingList|undefined〉〉'不能分配给类型'Dispatch〈SetStateAction〈string|布尔|未定义〉〉'
2条答案
按热度按时间vql8enpb1#
您可以使用generic组件。这样组件将在多种类型上工作而不是单个类型。
您可以为子 prop 定义一个通用接口。和一个通用组件,它使用该接口作为其props的类型。
使用上面的方法,我们可以在调用/定义时更改
T
,并且基于此,组件的内部类型将发生变化。为了简单起见,我为ShoppingList创建了一个简单的接口,并为状态变量
ShoppingListKey
提供了一个预填充值。代码如下所示:CodeSandbox
xdnvmnnf2#
TypeScript可能有太多的推理,你可能只需要为你的解决方案制作一个专用的
type
来简化你的类型。现在,您有了一个专用的TypeScript
type
供您的targetStateValue
使用,您可以如下使用它: