Question

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

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

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

我想将此组件分解为更小的元素，以便我只能使用我需要的位或使用替代方法。类似的东西：

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

但是，可能产生两行。要做到这一点，我需要一个可能需要渲染两个元素的组件。

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

有没有什么方法可以让React组件呈现多个元素而不包装它们？

或者，是否有一个我错过的更简单的解决方案。

Answer 1

<table>可以包含多个<tbody>子项，因此“row”组件的一个选项是返回以下内容：

<tbody>
    <trow></trow>
    <trow></trow>
</tbody>

如果您这样做，则应删除包裹行的“body”组件。

Answer 2

创建一个返回所需元素的函数。

  const fun = (items) => items.map((item) => <tr key={item.id}>item.name</tr>);

在表体内调用它：

<tbody>
{fun(items)}
</tbody>

从React Component返回多个元素

2 个答案: