Question

我正在使用React构建一个TreeView Typescript组件。我希望能够灵活地注入呈现每个节点的模板TreeNode组件。

如何键入TreeNode的道具，以便可以将TreeNode作为道具注入TreeView中，而没有typescript抱怨我没有提供{{ 1}}的道具，即使TreeNode建立层次结构并为每个TreeView提供适当的TreeNode时，道具仍然会出现。

我试图将代码精简到最小：

props

Answer 1

这似乎可行：

const buildTreeRecursively = (treeData: React.PropsWithChildren<TreeNodeProps>[]) =>
    treeData.map((node) => {
        if (node.children) {
            return (
                <TreeNode id={node.id} title={node.title}>
                    {buildTreeRecursively(node.children as React.PropsWithChildren<TreeNodeProps>[])}
                </TreeNode>
            )
        }
        return <TreeNode id={node.id} title={node.title} />
    })

如果我离开if (node.children.length > 0)，则会收到编译错误

对象可能为'null'或'undefined'。

并且由于node.children的类型是React.PropsWithChildren<TreeNodeProps>[]的超集，因此我们必须对其进行强制转换，因为我们知道我们仅使用该类型的子集。

通过查看来自{p>的treeData的类型提示，我了解了props的类型

const TreeNode: React.SFC<TreeNodeProps> = (props) => {
  return (
    <div key={props.id}>
        <div>{props.title}</div>
        <div>{props.children}</div>
    </div>
  )
}

是React.PropsWithChildren<TreeNodeProps>。

当Typescript中具有强制性道具时，将React组件作为道具注入

1 个答案: