来自Json Data的React Table动态列和行

Question

这是我的问题。如何动态显示标题名称及其相应的行？我现在正在使用一个简单的反应表。

我已经对图像中的名称（如表8-8、2017-9等）进行了硬编码。

列应为label，行应为referencePoints数组中的相应值。

Answer 1

只需在表头中放置一个代码块，如下所示：

<th>{header}</th>

您可以在render方法中从props或state接收标头。如果您是从Redux收到的，则您的渲染方法可能包含：

const {header} = this.props;

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

如果您愿意，也可以遍历标题：

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

确保将键添加到使用数组添加的项。如果您不这样做，React会警告您。

Answer 2

您可以像这样在表头之间编写循环

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

您可以渲染为

<th>
{header}
<th>

该代码只是一种表示形式，而不是实际的代码