Javascript 使用注入的道具来应对类型脚本问题

如何避免对注入React.children.map到直接在typescript中呈现的组件的道具进行类型检查

类型ContainerProps={
子元素：JSX.Element[]；
};
导出常量容器：React.FC=（{children}）=>{
常量[isOpen，setIsOpen]=useState（false）；
返回(
{React.Children.map（Children，child=>
反应。克隆元素（儿童{
伊索本，
刚毛
})
)}
);
};

键入ClickProps={
子节点：React.ReactNode；
等参：布尔；
setIsOpen：（布尔）=>void；
};
导出常量单击：React.FC=（{children，isOpen，setIsOpen}）=>{
返回(
setIsOpen（！isOpen）}>
{儿童}
);
};

在这个场景中，当我调用下面的代码时，我会得到下面的错误，因为没有传入

isOpen

和

setIsOpen

道具。当直接调用Click组件时，我如何在Click组件中设置这些道具的类型安全性，而不需要将它们传入

试验
错误
类型“{children:Element；}”缺少类型“ClickProps”中的以下属性：isOpen、setIsOpents（2739）

当直接调用Click组件时，我如何在Click组件中设置这些道具的类型安全性，而不需要将它们传入

这里的问题是，当您这样做时：

    <Click>
        <h1>Test</h1>
    </Click>

这样，在不使用道具的情况下呈现组件是一种有效的调用

---

不过，我不确定如何使用

React.cloneElement

实现类型安全。一旦您将子元素转换为

JSX.Element[]

之后，typescript就不再知道源于哪个原始组件，因此我不确定它如何知道要强制执行哪些道具

---

我不确定你到底想在这里做什么，但我会重新思考你的总体战略，看看你是否可以在没有

反应的情况下做到这一点。cloneElement

我同意@AlexWayne的观点，即注入的道具不能很好地与typescript配合，你可能想用不同的设计模式来重写它。您可以使用渲染道具（将单击组件作为道具传递给容器），或作为子对象（容器道具包括

{children:React.FC}

，容器调用

{children（{isOpen，setIsOpen}）}

，JSX变为

{（道具）=>（测试）}

）。

type ClickProps = {
    children: React.ReactNode;
    isOpen?: boolean;
    setIsOpen?: (isOpen: boolean) => void;
};
export const Click: React.FC<ClickProps> = ({ children, isOpen, setIsOpen }) => {
    if (isOpen === undefined || setIsOpen === undefined) return null
    return (
        <div onClick={() => setIsOpen(!isOpen)}>
            {children}
        </div>
    );
};