React Table динамические столбцы и строки из данных Json

Question

Так вот мой вопрос. Как я могу динамически отображать имена заголовков и соответствующие им строки? Я сейчас использую простую таблицу реакции.

Я жестко закодировал имена, как вы можете видеть в таблице (2017-8, 2017-9, .....) с картинки.

столбцы должны быть меткой, а строки должны соответствовать значению из массива referencePoints.

Answer 1

Просто поместите блок кода в заголовок таблицы следующим образом:

<th>{header}</th>

Вы можете получить свой заголовок из реквизита или состояния в методе рендеринга. Если вы получаете его от Redux, ваш метод рендеринга может содержать:

const {header} = this.props;

return(
   <table>
   <tr> <th>{header}</th>...</tr>
   ...
   </table>
)

Вы также можете перебирать заголовки, если хотите:

<tr> {headers.map((head, i)=>(<th key={i}>{head}</th>))} </tr>

Обязательно добавьте ключ к элементам, добавленным в массив. Реакт предупредит вас, если вы этого не сделаете.

Answer 2

Вы можете написать цикл по заголовкам таблицы, например

header = [];
Dates.forEach(date => {
header.push(<td>{date.value}</td>
});

вы можете сделать как

<th>
{header}
<th>

Код - это просто представление, а не фактический код