Question

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

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

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

有什么办法吗？

Answer 1

最好提供您到目前为止尝试过的内容以及遇到的问题。在SO中，如果您不提供该信息，那么您的问题可能会结束。但是，这是一个令人欢迎的礼物：您可以在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>

Answer 2

也有一些很棒的React npm项目可以为您做到这一点，并为您提供很大的灵活性。我找到了这个https://github.com/agracio/ts-react-json-table，它看起来真的很酷。我还没有使用过它，但是我正要使用它，因为我正在寻找可以采用JSON并快速创建表的东西。

如何制作行和列来自JSON对象的React表

2 个答案: