如何迭代React组件中的嵌套数组？

我有一个多维数组：数组results包含18个数组row，每个包含6个数字。如何迭代React组件中的嵌套数组？

我想将其作为表格呈现。逻辑将是

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

但这是不对的。这是什么程序，你如何嵌套地图调用和插值？

来源

2016-02-07 GreenTriangle

一种方式做到这一点

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/

来源

2016-02-07 05:53:04 manonthemat

我建议组分中分离到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> 
);

来源

2016-02-07 05:59:51 oobgam

这个工作很适合我来映射数组的数组，我有一个名为包含数组根数组，我成立了以功能为这样：

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

来源

2017-07-17 04:34:38 edencorbin

如何迭代React组件中的嵌套数组？

回答

相关问题