javascript - React 从给定的整数在 for 循环中渲染多个按钮

Question

我正在构建一个进度条，它需要两个输入，totalSteps 和 activeStep。我将渲染与总步数相等的圆圈数，事件步为灰色。

我有映射对象数组的经验，但是在这种情况下，我没有数组，我只得到一个整数。

我正在尝试编写一个在 for 循环中返回 div 的函数，但这不起作用。

const ProgressBar = (props) => {
  const { activeStep, totalSteps } = props;

  const displayProgressBar = () => {
    for (let i = 1; i <= totalSteps; i++) {
      return <div>Hello</div>;
    }
  };
  return <div className="progressBar">{displayProgressBar()}</div>;
};

即使 totalSteps 为 3，上面的代码也只渲染了一次 Hello。有没有一种方法可以在不创建数组的情况下实现预期的结果？

Answer 1

您的 for 循环在第一次迭代后终止，因为 return 立即终止函数调用。您需要将 JSX 元素累积在一个数组中并使用它来代替。您也根本不需要函数 displayProgressBar。

const ProgressBar = (props) => {
  const { activeStep, totalSteps } = props;

  const steps = [];
  for (let i = 1; i <= totalSteps; i++) {
    steps.push(<div>Hello</div>);
  }
  
  return (<div className="progressBar">{ steps }</div>);
};

您可能应该向 activeStep 项目添加一个 active 类或其他东西，以便它被选中，更改 steps.push(...) 从上面到:

steps.push(<div className={ i == activeStep ? "active" : "" }>Hello</div>);