Question

我试图在给定用户提供的变量的情况下填充表格。例如，用户将输入N = 10，然后是增量值I = 2，最大值M = 20，它应填充表格以从左下方读取，如下所示：

16 18 20

10 12 14

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

＆＃13;

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

＆＃13;

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

＆＃13;

我知道它没有工作，因为没有数据，没有名字，价格，身份证等。试图解决我最接近的例子。有什么想法吗？

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

如何在Javascript中从左到右将值映射到表

1 个答案: