时间戳

首页 > 解决方案 > 来自 Json Data 的 React Table 动态列和行

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

问题描述

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

正如您在图像中的表格（2017-8、2017-9、......）中看到的那样，我已经对名称进行了硬编码。

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

在此处输入图像描述

标签： javascriptreactjsreact-redux

解决方案

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

<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 会警告你。

推荐阅读