Блог

Я пытаюсь динамически создавать таблицу в React. Ячейки в таблице будут получены из dataset свойства входящего HTML-объекта. Таблица будет состоять из двух столбцов — имени атрибута и значения атрибута.

Эта функция создает внешнюю таблицу:

   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 файлы! Он ничего не возвращает, хотя я вижу, что он перебирает все атрибуты dataset, как я и ожидал. Я попытался обернуть это во фрагмент реакции, но это не сработало. Я не могу придумать никаких других возможных решений. Есть идеи?

Две проблемы в вашем коде:

• Вы ничего не возвращаете из buildTableRows2() функции. Вам нужно добавить return ключевое слово перед Object.keys() внутри buildTableRows2() функции.
• .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>
    );
}