使用 React JS 显示和修改 JSON 数据（显示在表格中）

Posted 2023-03-06

【中文标题】使用 React JS 显示和修改 JSON 数据（显示在表格中）

【英文标题】：Display and modify JSON data (displayed in table ) Using React JS

【发布时间】：2019-09-26 14:55:54

【问题描述】：

我对 React to JS 非常陌生，这也是我向社区提出的第一个问题，所以请帮助我。

我想创建一个表格来显示来自 JSON 文件的数据（它应该每页显示大约 50 行），我还需要能够修改同一个表格中的数据并稍后更新 JSON 的内容相应地。

我需要在表格中有以下类型的单元格：普通不可编辑的文本框、可编辑的文本框、选择列表（显示来自另一个 JSON 文件的数据）、数字字段、日历等。

我知道对你们中的许多人来说这可能是一个愚蠢的问题，但请帮助我了解如何解决这个问题。

（我不是要工作代码，请帮助我了解如何开始使用它。）

谢谢。

【参考方案1】：

对于表： 1.创建组件 2.将json值存入state。 3.建表。在 tbody 中使用 state.map 并返回行。

对于不可编辑的文本框，将其设为只读。

【参考方案2】：

github 上的大量库可以满足您的需求。

例如：

https://react-bootstrap-table.github.io/react-bootstrap-table2/ https://github.com/tannerlinsley/react-table https://material-ui.com/demos/tables/

还有很多其他的，应该使用哪一个取决于您的详细要求，然后找到最合适的。