Javascript React.js - 创建简单的表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39462458/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React.js - Creating simple table
提问by Alejandro
Sorry for what it appears to be a newbie question (been up working late and just got started with React) but I am trying to figure out how to just render a simple table with nxndimension.
抱歉，这似乎是一个新手问题（工作到很晚，刚刚开始使用 React），但我正在尝试弄清楚如何仅渲染一个具有nx n维度的简单表格。
For instance, in my component, the render output would be something like this:
例如，在我的组件中，渲染输出将是这样的：
<table id="simple-board">
<tbody>
<tr id="row0">
<td id="cell0-0"></td>
<td id="cell0-1"></td>
<td id="cell0-2"></td>
</tr>
<tr id="row1">
<td id="cell1-0"></td>
<td id="cell1-1"></td>
<td id="cell1-2"></td>
</tr>
<tr id="row2">
<td id="cell2-0"></td>
<td id="cell2-1"></td>
<td id="cell2-2"></td>
</tr>
</tbody>
</table>
where each row has it's own id , as well as each cell.
其中每一行都有自己的 id ，以及每个单元格。
The initial state
初始状态
constructor(props){
super(props);
this.state = {size: 3}
}
is what set the size of the table.
是设置表的大小。
What threw me of was how to implement a for loop inside the JSX.
让我想到的是如何在 JSX 中实现 for 循环。
回答by Alejandro
After a good night sleep, I was able to figure it out:
经过一夜好眠，我终于明白了：
import React, { Component } from 'react'
export default class Example extends Component {
constructor(props){
super(props);
this.state = {size: 3}
}
render(){
let rows = [];
for (var i = 0; i < this.state.size; i++){
let rowID = `row${i}`
let cell = []
for (var idx = 0; idx < this.state.size; idx++){
let cellID = `cell${i}-${idx}`
cell.push(<td key={cellID} id={cellID}></td>)
}
rows.push(<tr key={i} id={rowID}>{cell}</tr>)
}
return(
<div className="container">
<div className="row">
<div className="col s12 board">
<table id="simple-board">
<tbody>
{rows}
</tbody>
</table>
</div>
</div>
</div>
)
}
}
Thanks all for responding!
谢谢大家的回复！
回答by Alejandro
somthing like this :
像这样的东西：
<table id="simple-board">
<tbody>
{this.props.yourData.slice(0,this.state.size).map((item , index)=>{
return(
<tr key={index} id={`row${index}`}>
{item.felanBisar.map((item2,index2)=>{
return(
<td id={`cell${index}-{index2}`}></td>
);
})}
</tr>
);
})}
</tbody>
</table>
回答by Prestosaurus
One option (move stuff out of render():
一种选择（将东西移出render()：
import React from 'react';
import SimpleListMenu from '../menu/SimpleMenuListMenu'; // < Material UI element
let rows = [
'Setting One',
'Setting Two',
'Setting Three',
'Setting Four',
];
export default class MyTable extends React.Component {
createTable = () => {
let table = []
for (let i = 0; i < rows.length; i++) {
let children = []
children.push(<td>{rows[i]}</td>, <td>{<SimpleListMenu />}</td>)
table.push(<tr>{children}</tr>)
}
return table
}
render() {
return(
<table>
{this.createTable()}
</table>
)
}
}
Another option:
另外一个选项：
import React from 'react';
let id = 0;
function createData(option, type) {
id += 1;
return { id, option, type };
}
let rows = [
createData('Setting One', 'Private'),
createData('Setting Two', 'Public'),
createData('Setting Three', 'Group'),
createData('Setting Four', 'Private'),
];
export default class MyTable extends React.Component {
render() {
return(
<table>
{rows.map(row => (
<tr key={row.id}>
<td>{row.option}</td>
<td>{row.type}</td>
</tr>
))}
</table>
)
}
}
