从 React Component 返回多个元素

【问题标题】：Return multiple elements from React Component从 React Component 返回多个元素
【发布时间】：2018-02-20 20:12:25
【问题描述】：

我有一个组件可以呈现具有适当样式的表格。目前，它是一个单一的整体组件，需要大量数据来定义列和所有行的数据。

<MyTable
    columns={myColumnList}
    data={myTableData}
/>

此表的一个关键特性是，如果列列表中未定义其他数据，它将呈现两行。因此，选择一行将显示未显示在表格中的其他数据。

我想把这个组件分解成更小的元素，这样我就可以只使用我需要的部分或使用替代品。比如：

<MyTable>
<MyTableHeader columns={myColumnList} />
<MyTableBody>
    <MyTableRow data={row1Data} />
    <MyTableRow data={row2Data} />
    <MyTableRow data={row3Data} />
</MyTableBody>
<MyTableFooter />
</MyTable>

但是，可以产生两行。为此，我需要一个可能必须渲染两个元素的组件。

从一个组件返回多个元素的正常方法是将它包装在一个但在表格中是无效的 html 中。

有什么方法可以让我有一个 React 组件，它可以呈现多个元素而不将它们包装成一个单独的元素？

或者，有没有我错过的更简单的解决方案。

【问题讨论】：

• 我相信你的问题应该在codereview.stackexchange.com
• 有什么原因吗？我不是在问我的代码是否好，只是解释为什么我需要一个返回多个元素的组件以及为什么它不能被包装在
• 重复stackoverflow.com/questions/42122121/…
• @ThomasArbona 这个问题与辅助函数有关。事实上，这就是我的单体组件目前正在做的事情——返回一个包含两行的数组。我想做的就是把它作为一个单独的组件取出来。