如何渲染字符串或组件？答案

【问题标题】：How to render string OR Component?如何渲染字符串或组件？
【发布时间】：2020-12-20 20:04:44
【问题描述】：

我的表格中Row 组件的属性如下：

interface props {
    data: Array<string|number> | Array<React.Component>
}

我尝试使用data.map()，但它给了我错误，因为数据也可以包含React.Component 如何将包含内容的表格行渲染为给定数组的项？

【问题讨论】：

它们是反应组件还是反应元素？也就是数组是data={[Foo, Bar]}还是data={[<Foo />, <Bar />]}？
你能分享你使用过地图功能的完整代码吗？
@cbr 格式为 [, ]

标签： javascript reactjs

【解决方案1】：

正如您在评论中提到的，您实际上不是在使用组件，而是在使用元素。在这种情况下，您需要使用React.ReactElement 而不是React.Component。元素是组件的一个实例。

interface props {
    data: Array<string | number> | Array<React.ReactElement>
}

您的用例听起来可能只是在寻找“我可以渲染的任何东西”的类型。在这种情况下，使用React.ReactNode：

interface props {
    data: Array<React.ReactNode>
}

如果您只需要string | number | React.ReactElement 而不是false、true、null 等，请使用React.ReactChild 而不是React.ReactNode，因为它涵盖了string | number | ReactElement

interface props {
    data: Array<React.ReactChild>
}

有关它们的差异的更多详细信息，请参阅When to use JSX.Element vs ReactNode vs ReactElement?

【讨论】：