React.js - Erstellen von einfachen Tabelle

Sorry für das, was es scheint zu sein, eine newbie-Frage (wurde bis spät arbeiten und habe gerade angefangen mit Reagieren), aber ich bin versucht, herauszufinden, wie man einfach machen eine einfache Tabelle mit nxn dimension.

Zum Beispiel, in meiner Komponente, die render-Ausgabe wäre etwas wie dieses:

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

wo jede Zeile hat eine eigene id , ebenso wie jede Zelle.

Den ursprünglichen Zustand

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

ist, was die Größe der Tabelle.

Was warf mir der war, wie die Umsetzung einer for-Schleife innerhalb der JSX.

Mögliche Duplikate von loop innen Reagieren JSX

InformationsquelleAutor Alejandro | 2016-09-13

  1. 17

    Nachdem eine gute Nacht schlafen, ich war in der Lage, um es herauszufinden:

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

    Danke an alle für die Beantwortung!

    Schlaf funktioniert der trick!
    Danke, das war hilfreich. Ich war arbeiten auf ähnlichen problem

    InformationsquelleAutor Alejandro

  2. 1

    so etwas wie dieses :

      <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

    Einer option (move Zeug aus 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>
    )
  }

}

    Andere Möglichkeit:

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

}

    Finden Sie unter: https://material-ui.com/demos/tables/

    InformationsquelleAutor Prestosaurus

Schreibe einen Kommentar