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 루프를 구현하는 방법은 저를 왜곡 시켰습니다. 이 같은

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

감사합니다!