json - 如何制作一个行和列来自 JSON 对象的 React 表

Question

我正在尝试使用 React 构建一个基于 JSON 格式的动态表:

[{ "name": "Video1", "text": "video 1 text"},
   "name": "Video2", "text": "video 2 text",
   "name": "Video3", "text": "video 3 text",...}]

我需要它是动态的，因为会不断添加到 JSON，并且我希望表自动更新。

有什么办法可以做到这一点吗？

Answer 1

最好提供您到目前为止尝试过的操作以及遇到困难的地方。因此，如果您不提供该信息，您的问题可能会被关闭。但是，这里有一个欢迎礼物:你可以在 JSX 中使用 JS 表达式，多好啊。因此，正如@Roy Scheffers 建议的那样，您可以使用 map 来创建表格或任何您想要的内容。

const data = [
  { name: "Video1", text: "video 1 text" },
  { name: "Video2", text: "video 2 text" },
  { name: "Video3", text: "video 3 text" },
];

const App = () => (
  <div>
    <table>
      {data.map(el => (
        <tr>
          <td>{el.name}</td>
          <td>{el.text}</td>
        </tr>
      ))}
    </table>
  </div>
);

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

这个例子只是为了好玩:

class App extends React.Component {
  state = {
    data: [
      { name: "Video1", text: "video 1 text" },
      { name: "Video2", text: "video 2 text" },
      { name: "Video3", text: "video 3 text" },
    ],
    count: 1,
  };

  updateTable = () => { 
    this.setState(prevState => ({
      data: [...prevState.data, { name: `foo${prevState.count}`, text: `bar${prevState.count}` }],
      count: prevState.count += 1,
    }))
    if (this.state.data.length > 5) { clearInterval(this.intervalId); }
  }

  componentDidMount() {
    this.intervalId = setInterval(this.updateTable, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.intervalId);
  }

  render() {
    return (
      <div>
        <table border="1">
          {this.state.data.map(el => (
            <tr>
              <td>{el.name}</td>
              <td>{el.text}</td>
            </tr>
          ))}
        </table>
      </div>
    );
  }
}


ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>