如何使用for循环在react组件中列出整数？

Question

我有一个名为rounds和 prop 的状态current_round。current_round 的默认值为 0。我想用这些值做的是用整数列出按钮。例如，如果 的值为rounds4，则列出按钮 1、2、3 和 4。

for (var i =(this.props.order.order.current_round + 1); i<(this.props.order.rounds+1); i++) {

  return (
    <li><button id ={i} class="rounds_btn">{i}</button></li>
    );
  }

为此，我像上面一样制作了 for 循环，但它只显示一个整数 1 的按钮..

我的代码有什么问题吗？它没有显示任何错误。

提前致谢

Answer 1

如果您在循环内返回，则整个函数（包括循环）将完成执行。

解决这个问题的方法是创建一个组件数组，然后在循环后返回整个数组。

let { rounds, current_round } = this.props.order;
let list = [];

for (let i = current_round + 1; i < rounds + 1; i++) {
  list.push(
    <li>
      <button id={i} key={i} className="rounds_btn">{i}</button>
    </li>
  );
}

return list;

然而，使用 React 来做到这一点的通常方法是使用mapfunction。

let { order } = this.props;
let nums = range(order.current_round + 1, order.rounds + 1);

return nums.map(i => (
  <li><button key={i} id={i} className='rounds_btn'></button></li>
));

// quick range utility (could use lodash...)
function range(start, end) {
  let nums = [];
  for (let i = start; i < end; i++) nums.push(i);
  return nums;
}

在大多数情况下，您已经拥有数组（人员列表、项目列表等），您需要做的就是将每个数组映射到 React 组件，然后返回该列表。

我还添加了一个key属性，如果您忘记了组件列表的属性，React 会警告您（如果您以不同的顺序重新渲染列表，则有助于协调列表）。

还要注意使用class而不是className，因为class它是 JavaScript 中的保留字，React 选择使用它className作为 JSX prop。