创建简单的表格
对不起，它似乎是一个新手问题（工作起来很晚，刚开始使用React），但我想弄清楚如何渲染一个简单的n × n维表格。
例如，在我的组件中，渲染输出将如下所示：
<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>
每行有它自己的id，以及每个单元格。
初始状态
constructor(props){
super(props);
this.state = {size: 3}
}
是什么设置表的大小。
抛弃我的是如何在JSX内部实现for循环。
睡了一晚后，我才弄明白了：
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>
)
}
}
感谢所有的回应！
像这样的东西：
<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>