如何将值映射到从左到右的JavaScript中的表格

Question

我正在尝试填充用户提供的给定变量的表。例如，用户将输入n = 10，然后是增量值i = 2，最大值m = 20，它应该填充一个表以从左下角到右读取，如：

16 18 20

10 12 14

如何将值映射到表中的单元格？我一直在找到示例，但是它们大多是在一系列对象中提供的一组数据。

https://codepen.io/anon/pen/vqqwdd

const BottomLeftValue = 10;
const IncrementalValue = 2;
const MaxValue = 30;
class TableRow extends React.Component {
  render() {
    const {
      data
    } = this.props;
    const row = data.map((data) =>
    <tr>
      <td key={data.name}>{data.id}</td>
      <td key={data.price}>{data.id+1}</td>
      <td key={data.id}>{data.id+2}</td>
    </tr>
    );
    return (
      <span>{row}</span>
    );
  }
}
class Table extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <table>
        <TableRow data={this.props.data} />
      </table>
    );
  }
}
ReactDOM.render(<Table data={BottomLeftValue} />, document.getElementById("root"));

<div id="root"></div>

我知道它是不起作用的，因为没有数据，名称，价格，ID等。试图解决我最近的示例。有什么想法吗？

Answer 1

如果制作数组并将其分解在您所处的位置，这可能会给您一些想法：

const min = 10;
const step = 2;
const max = 30;
const getRange = (min, max, step, r =[]) =>
  min <= max
    ? getRange(min + step, max, step, [...r, min])
    : r;

const chunk = (n, arr) => 
  arr.reduce((acc, cur) => {
    var last = acc[acc.length - 1];
    return last.length === n 
      ? (acc.push([cur]), acc)
      : (last.push(cur), acc[acc.length - 1] = last, acc);
  }, [[]]);

const range = getRange(min, max, step);
const data = chunk(3, range);
console.log(data); // [ [10, 12, 14], [16, 18, 20], [22, 24, 26], [28, 30] ]
// rendering in react
data.map(row => 
  <div className='row'>
    { row.map(col => 
      <div className='column'>
        { col }
      </div>) 
    }
  </div>
);

如果您有lodash或类似的内容，则可以使用_.range和_.chunk