Jak iterować zagnieżdżone tablice w komponencie React?

Question

Mam tablicę wielowymiarową: tablicę results zawierającą 18 tablic row, z których każda zawiera 6 liczb.

Chcę renderować to jako tabelę. Logika byłaby

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

Ale nie mogę zrozumieć, jak to napisać w JSX.

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

Ale to nie w porządku. Jaka jest procedura tego, jak zagnieżdżać wywołania map i interpolacje?

Answer 1

Jednym ze sposobów, aby to zrobić

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') 
); 

w akcji: https://jsfiddle.net/69z2wepo/30476/

Answer 2

Proponuję rozdzielania składników do Resultset, NumberComponent i staram się być zgodne z funkcjami strzałek.

// 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> 
); 

Answer 3

Ten pracował dobrze dla mnie do mapowania tablicy tablic, mam nazwał tablicę, która zawiera tablice korzeń, skonfigurować tak, aby funkcje jak:

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