javascript - 如何使数组在 React Component 的表格中垂直输出？

Question

我有以下数据数组:

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

我可以将数据输出到水平 View 中，但我想创建一个垂直 View 。

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

示例:https://jsfiddle.net/69z2wepo/30476/

Answer 1

您可以转换数组并构建一个新数组，并在交换的索引处取值。

var array = [ [ 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 ]],
    result = array.reduce((r, a, i) =>
        (a.forEach((b, j) => (r[j] = r[j] || [])[i] = b), r), []);
    
console.log(result);