React.js - 创建简单的表格

Question

抱歉，这似乎是一个新手问题（工作到很晚，刚开始使用 React），但我想弄清楚如何只渲染一个 n x 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 循环。

原文由 Alejandro 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

睡了一觉后，我想通了：

 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>
    )
  }
}

感谢大家的回应！

原文由 Alejandro 发布，翻译遵循 CC BY-SA 3.0 许可协议