问在react中使用map渲染2列

EN

function splitArray(array, n) {
  let [...arr] = array;
  let res = [];
  while (arr.length) {
    res.push(arr.splice(0, n));
  }
  return res;
}

const rowsPerCol = 4
const array = ['first','second','third','fourth','fifth','sixth']
const columns = splitArray(array, rowsPerCol)

const Column = props => (
<div className="column">
  <Row label="label" rows={props.rows}/>
  </div>
);

const Row = ({rows}) => (
rows.map((data,key) => <div key={key}>{data}</div>)
);

// Example class component
class Table extends React.Component {
  render() {
    return (
      <div className="table">
        {columns.map((rows,key) => <Column key={key} rows={rows} />)}
      </div>
    );
  }
}

// Render it
ReactDOM.render(
  <Table />,
  document.getElementById("react")
);

.column {
padding : 5px;
border : 2px dashed black;
}

.table {

display : flex;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>