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

【问题标题】：React Table dynamic columns and rows from Json Data来自 Json Data 的 React Table 动态列和行
【发布时间】：2019-02-04 15:43:51
【问题描述】：

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

我已经硬编码了您在图片中的表格（2017-8、2017-9、......）中看到的名称。

列应该是标签，行应该是referencePoints数组中的相应值。

【问题讨论】：

【解决方案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 会警告你。

【讨论】：

【解决方案2】：

您可以在表格标题中编写一个循环，例如

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

你可以像这样渲染

<th>
{header}
<th>

代码只是一个表示，而不是实际代码

【讨论】：