Wie kann ich verschachtelte arrays iterieren in einer React-Komponente?

Ich habe ein mehrdimensionales array: ein array results mit 18-arrays row jeweils 6 zahlen.

Will ich machen diese als eine Tabelle. Die Logik wäre

results.each as (row)
     <tr>
         row.each as (number)
               <td>number</td>
     </tr>

Aber ich kann nicht herausfinden, wie Sie schreiben würden dies in JSX.

const Resultset = props => (
    {props.rows.map(rows => {
        <tr>
            {rows.map(number => <td>{number}</td>)}
        </tr>
    })}
);

Aber das ist nicht richtig. Was ist die Vorgehensweise, wie du das nest der Karte Anrufe und Interpolationen?

InformationsquelleAutor GreenTriangle | 2016-02-07

  1. 11

    Einen Weg, es zu tun

    var arr = [ [ 2, 3, 4, 5, 6, 7 ],
  [ 8, 9, 10, 11, 12, 13 ],
  [ 14, 15, 16, 17, 18, 19 ],
  [ 20, 21, 22, 23, 24, 25 ],
  [ 26, 27, 28, 29, 30, 31 ],
  [ 32, 33, 34, 35, 36, 37 ],
  [ 38, 39, 40, 41, 42, 43 ],
  [ 44, 45, 46, 47, 48, 49 ],
  [ 50, 51, 52, 53, 54, 55 ],
  [ 56, 57, 58, 59, 60, 61 ],
  [ 62, 63, 64, 65, 66, 67 ],
  [ 68, 69, 70, 71, 72, 73 ],
  [ 74, 75, 76, 77, 78, 79 ],
  [ 80, 81, 82, 83, 84, 85 ],
  [ 86, 87, 88, 89, 90, 91 ],
  [ 92, 93, 94, 95, 96, 97 ],
  [ 98, 99, 100, 101, 102, 103 ],
  [ 104, 105, 106, 107, 108, 109 ] ];

var Hello = React.createClass({
  tablerows: function() {
    return this.props.arr.map(rows => {
        var row = rows.map(cell => <td>{cell}</td>); 
        return <tr>{row}</tr>;
    });
  },
  render: function() {
    return <table>{this.tablerows()}</table>;
  }
});

ReactDOM.render(
  <Hello arr={arr} />,
  document.getElementById('container')
);

    In Aktion: https://jsfiddle.net/69z2wepo/30476/

    InformationsquelleAutor

  2. 4

    Ich würde vorschlagen, die Trennung der Komponenten zu Resultset, NumberComponent und versuchen, im Einklang mit den Pfeil-Funktionen.

    //Explicit return

const NumberComponent = props => {
    return (
        <td>{ props.number }</td>
    )
}

const Resultset = props => {
    return (
        <tr>
            {
                props.rows.map( number => <NumberComponent number={number} />)
            }
        </tr>
    )
}

//Implicit return

const NumberComponent = props => (<td>{ props.number }</td>);

const Resultset = props => (
    <tr>
        {
            props.rows.map( number => <NumberComponent number={number} />)
        }
    </tr>
);

    InformationsquelleAutor

  3. 0

    Dies funktionierte gut für mich, um anzeigen ein array von arrays, die ich genannt habe das array mit arrays Wurzel, die ich eingerichtet Funktionen als so: 

    //root render function

renderNested = (row, i) => {
    return (
        root.map(function (row, i) {
            return (
            <div key={i}>
                {this.renderNested(row, i)}
            </div>
            )
        }, this)
    )
}

//nested render function

renderNested = (row, i) => {
    return (
        row.map(function (innerrow, ii) {
            return(
                <span key={ii}>
                    Nested content here
                </span>
            )
        }, this)
    )
}

    InformationsquelleAutor

  4. 0

    Können Sie die Iteration der erste Teil der Reihe und in der zweiten iteration können Sie den Aufruf einer anderen Komponente und übergeben Sie das zweite array als requisite

    const Resultset = props => (
{props.rows.map(rows => {
    <tr>
        <AnotherComponent rows={rows} />
    </tr>
})}
);

    In eine andere Komponente wiederholen Sie die gleiche Karte verarbeiten.

    InformationsquelleAutor

Schreibe einen Kommentar