從 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>
    );
}