如何使用 for 循环在反应组件中列出整数？答案

【问题标题】：How to use for loop for listing integer in react component?如何使用 for 循环在反应组件中列出整数？
【发布时间】：2016-12-31 10:59:54
【问题描述】：

我有一个名为 rounds 的 state 和 prop current_round。 current_round 的默认值是 0。我想用这些值做的是用整数列出按钮。例如，如果rounds 的值为 4，则列出 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 的按钮..

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

提前致谢

【问题讨论】：

标签： javascript reactjs for-loop

【解决方案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 执行此操作的常用方法是使用 map function。

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 属性。

【讨论】：

【解决方案2】：

我猜它只是返回渲染函数中的第一个值。你应该把结果放在一个变量中，然后渲染这个变量。

const buttons = [];

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

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

return (<ul> {buttons} </ul>);

【讨论】：