React.js - シンプルなテーブルを作成する

Question

初心者の方に質問して申し訳ありませんが（遅くなり、Reactで始まったばかりです）、単純なテーブルをレンダリングする方法を理解しようとしていますn x n寸法。各行は、それ自身のIDと、各セルを持っている

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

：例えば

は、私のコンポーネントでは、レンダリング出力はこのようなものになるだろう。

初期状態

constructor(props){ 
    super(props); 
    this.state = {size: 3} 
    } 

は、テーブルのサイズを設定したものです。

JSXの中でforループを実装する方法が私を捨てました。このような

Answer 1

気にいら：

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

Answer 2

良い睡眠の後、私はそれを把握することができた：すべての応答のための

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

感謝を！