Как перебрать вложенные массивы в компонент React?

Question

У меня есть многомерный массив: массив results, содержащий 18 массивов row, каждый из которых содержит 6 чисел.

Я хочу отобразить это как таблицу. Логикой будет

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

Но я не могу понять, как вы могли бы написать это в JSX.

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

Но это не так. Какова процедура для этого, как вы вставляете вызовы карт и интерполяции?

Answer 1

Один из способов сделать это

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

В действии: https://jsfiddle.net/69z2wepo/30476/

Answer 2

Я хотел бы предложить разделение компонентов для Resultset, NumberComponent и попытаться соответствовать функциям стрелок.

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

Это хорошо работало для меня карту массива массивов, я назвал массив, содержащие массивы корня, я создал для функций, так:

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