React.js - Création de tableau simple

Désolé pour ce qu'il semble être un newbie question (été de travailler tard et juste a commencé à Réagir), mais je suis à essayer de comprendre comment juste rendre un simple tableau avec les nxn dimension.

Par exemple, dans mon composant, le rendu serait quelque chose comme ceci:

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

où chaque ligne a sa propre id , ainsi que chaque cellule.

L'état initial

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

est ce qui détermine la taille de la table.

Ce que m'a lancé des est de savoir comment mettre en œuvre une boucle for à l'intérieur de la JSX.

InformationsquelleAutor Alejandro | 2016-09-13
  1. 21

    Après une bonne nuit de sommeil, j'ai été en mesure de le comprendre:

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

    Merci à tous pour votre réponse!

    • Merci, cela a été utile. Je travaillais sur un problème similaire
    InformationsquelleAutor Alejandro
  2. 1

    quelque chose comme ceci :

      <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>
    InformationsquelleAutor Alireza Valizade
  3. 0

    Une option (déplacer des choses de 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>
    )
  }

}

    Une autre option:

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

}

    Voir: https://material-ui.com/demos/tables/

    InformationsquelleAutor Prestosaurus