Javascript React.js-创建简单表

很抱歉，这似乎是一个新手问题（一直工作到很晚，刚刚开始使用React），但我正在尝试找出如何使用nxn维度渲染一个简单的表

例如，在我的组件中，渲染输出如下：

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

是什么设置了桌子的大小

让我头疼的是如何在JSX中实现for循环

像这样的事情：

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

{this.props.yourData.slice（0，this.state.size）.map（（项，索引）=>{
返回(
{item.felanBisar.map（（item2，index2）=>{
返回(
);
})}
);
})}

睡了一个好觉后，我终于明白了：

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

import React，{Component}来自“React”
导出默认类示例扩展组件{
建造师（道具）{
超级（道具）；
this.state={size:3}
}
render（）{
让行=[]；
对于（var i=0；i

谢谢大家的回复

一个选项（将内容移出

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

}

从“React”导入React；
从“../menu/SIMPLEMENULISTEMNUS”；//{
let table=[]
for（设i=0；i

另一种选择：

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

}

从“React”导入React；
设id=0；
函数createData（选项，类型）{
id+=1；
返回{id，option，type}；
}
让行=[
createData（'settingone'，'Private'），
createData（'settingtwo'，'Public'），
createData（'设置三'，'组'），
createData（'设置四'，'私有'），
];
导出默认类MyTable扩展React.Component{
render（）{
返回(
{rows.map（row=>(
{row.option}
{row.type}
))}
)
}
}

请参阅：

private getRows（）：任意{
让行：任意[]=[]；
if（this.state.data）
this.state.data.map（（元素）=>{
推(
{element.title}
);
});
返回行；
}
呈现（）{
返回
{this.getRows（）}
}

从具有

功能的
数组
和具有备用颜色的行构建表：

function buildTable(arr){
  const rows = arr.map((row,i) => { 
      return <tr style={{backgroundColor: i%2 ? '#F0FFF2':'white'}} key={i}>
                <td>{row[0]}</td><td>{row[1]}</td>
             </tr> 
  })
  return <table><tbody>{rows}</tbody></table>
}

const data = [["FieldA", "aaa"],["FieldB", "bbb"],["FieldC", "ccc"]];
buildTable(data);

函数构建表（arr）{
常量行=arr.map（（行，i）=>{
返回
{行[0]}{行[1]}
})
返回{rows}
}
常量数据=[“字段A”、“aaa”]、[“字段B”、“bbb”]、[“字段C”、“ccc”]；
构建表（数据）；
可能重复感谢，这很有帮助。我正在处理类似的问题
  private getRows(): any {

    let rows: any[] = [];

    if (this.state.data)
      this.state.data.map((element) => {
        rows.push(<tr>
            <td style={{border: '1px solid black'}}>
              {element.title}
            </td>
         </tr>);
      });

    return rows;
  }

  render( ) { 
                        
        return <div>           

          <table style={{border: '1px solid black'}}>

            {this.getRows()}

          </table>

        </div>                
        
    }

function buildTable(arr){
  const rows = arr.map((row,i) => { 
      return <tr style={{backgroundColor: i%2 ? '#F0FFF2':'white'}} key={i}>
                <td>{row[0]}</td><td>{row[1]}</td>
             </tr> 
  })
  return <table><tbody>{rows}</tbody></table>
}

const data = [["FieldA", "aaa"],["FieldB", "bbb"],["FieldC", "ccc"]];
buildTable(data);