如何创建其行和列来自JSON对象的react表
如何创建其行和列来自JSON对象的react表
提问于 2018-08-16 03:13:07
我正在尝试使用React构建一个基于JSON格式的动态表：
[{ "name": "Video1", "text": "video 1 text"},
"name": "Video2", "text": "video 2 text",
"name": "Video3", "text": "video 3 text",...}]我需要它是动态的，因为将有一个连续的添加到JSON，我希望表自动更新。
有什么方法可以做到这一点吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-08-16 03:28:41
最好提供你到目前为止已经尝试过的内容以及你被困在哪里。因此，如果您不提供该信息，您的问题可能会被关闭。但是，这里有一个受欢迎的礼物:你可以在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>
Stack Overflow用户
发布于 2019-06-22 05:10:47
也有一些很棒的React npm项目可以帮你做到这一点，并给你很大的灵活性。我找到了这个https://github.com/agracio/ts-react-json-table，它看起来真的很酷。我还没有使用它，但我即将使用它，因为我正在寻找一些东西来获取JSON并快速制作一个表。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51864998
复制相关文章
相似问题