Question

下表中提供了对Row组件的支持：

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

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

Answer 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?

如何呈现字符串或组件？

1 个答案: