从 javascript 函数返回多个反应组件

Question

我正在尝试在 React 中动态构建一个表。 表格中的单元格将来自传入 HTML 对象的dataset属性。 该表将有两列 - 属性名称和属性值。

此函数构建外部表：

  buildDataList = () => (
    <Scroll>
      <Table isStriped key={this.claimCountLimitPerFin} >
        <Table.Header>
          <Table.HeaderCell content="Name" minWidth="medium" />
          <Table.HeaderCell content="Value" minWidth="medium" />
        </Table.Header>
        <Table.MultiSelectableRows // this is probably not necessary?
          maxSelectionCount={10}
        >
          {this.buildTableRows2()}

        </Table.MultiSelectableRows>
      </Table>
    </Scroll>
  );

这是我调用以构建TableRows的函数：

  buildTableRows2 = () => {
    Object.keys(this.props.dataset).forEach(datum => <Table.Row
      id={datum}
      key={`ROW_${datum}`}
    >
      {this.buildTextCell(datum)}
      {this.buildTextCell(this.props.dataset[datum])}
    </Table.Row>);
  }

我不知道如何让buildTableRows2返回所有的TableRow ！ 它没有返回任何内容，但我看到它正在按照我的预期循环遍历数据集的所有属性。 我尝试将它包装在 React 片段中，但这没有用。 我想不出任何其他可能的解决方案。 有任何想法吗？

Answer 1

您的代码中有两个问题：

• 您没有从buildTableRows2()函数返回任何内容。 您需要在buildTableRows2()函数内的Object.keys()之前添加return关键字。
• .forEach()方法不返回任何内容，您需要使用.map()方法。

更改buildTableRows2()函数，如下所示：

buildTableRows2 = () => {
    return Object.keys(this.props.dataset).map(datum => (
       <Table.Row
         id={datum}
         key={`ROW_${datum}`}
       >
         {this.buildTextCell(datum)}
         {this.buildTextCell(this.props.dataset[datum])}
       </Table.Row>
    );
}