javascript - 如何将值从左到右映射到 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