ReactTS：如何将子级嵌套在“容器组件”中？

Question

我正在使用 Typescript 在 React 中创建可重用的前端组件，并且我正在努力解决一个在经典包中似乎可以实现的功能。

我希望能够在“容器组件”中嵌套某种类型的子组件，并检索主组件中的每组子组件。

我尝试了很多儿童道具类型的变体，例如：

export type DataGridChild = typeof DataGridColumns | typeof DataGridActions;

export type DataGridProps<T> = BaseProps & {
    data: T[];
    children: React.ReactElement<DataGridChild> | React.ReactElement<DataGridChild>[];
}

但是我找不到一种方法来检索具有正确类型的每个孩子。例如，如果我添加 DataGridColumn 容器组件两次，TypeScript 也不会引发任何错误。

最后我希望有一个可与此类代码一起使用的组件：

<DataGrid data={persons}>
  <DataGridColumns>
    <DataGridColumn field="name" />
    <DataGridColumn field="age" />
    <DataGridColumn field="weight" />
    <DataGridColumn field="birthDate" type="date" />
  </DataGridColumns>
  <DataGridActions>
    <DataGridAction text="Action 1" onClick={(rd) => console.log("Action 1 clicked")} />
  </DataGridActions>
</DataGrid>

我在网上找不到任何东西。有人知道如何制作吗？

非常感谢:)

Answer 1

我想也许是因为在你的代码的第一行

typeof

返回

undefined

type DataGridChild = typeof DataGridColumns | typeof DataGridActions;

也许

instanceof

对你有帮助

查看此链接以获取更多信息typeof 和instanceof 之间有什么区别以及何时应该使用其中一个？