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

Question

我正在构建一个进度条，它需要两个输入，totalSteps并且activeStep. 我将渲染一些等于总步骤数的圆圈，其中活动步骤为灰色。 

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

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

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

};

上面的代码Hello即使totalSteps是3也只渲染一次。有没有办法在不创建数组的情况下达到预期的结果？

Answer 1

您的for循环在第一次迭代后终止，因为return立即终止函数调用。您需要将 JSX 元素累积到数组中并使用它。displayProgressBar您也根本不需要该功能。const ProgressBar = (props) => {&nbsp; const { activeStep, totalSteps } = props;&nbsp; const steps = [];&nbsp; for (let i = 1; i <= totalSteps; i++) {&nbsp; &nbsp; steps.push(<div>Hello</div>);&nbsp; }&nbsp;&nbsp;&nbsp; return (<div className="progressBar">{ steps }</div>);};您可能应该active向该activeStep项目添加一个类或其他内容，以便选择它，steps.push(...)从上面更改为：steps.push(<div className={ i == activeStep ? "active" : "" }>Hello</div>);

Answer 2

您“...具有映射数组的经验...”那么这应该是小菜一碟；它是完全一样的。如果问题更多是关于如何获取数字并将其转换为数组（我认为是这样），那么常见的模式是[...Array(5).keys()]. 一旦你有了一个数组，你就可以像平常一样在 JSX 中映射它。const ProgressBar = (props) => {&nbsp; const { activeStep, totalSteps } = props;&nbsp; const displayProgressBar = () =>&nbsp; &nbsp; [...Array(totalSteps).keys()].map((step) => <div key={step}>Hello</div>);&nbsp; return <div className="progressBar">{displayProgressBar()}</div>;};不过，内联数组可能更简单。const ProgressBar = (props) => {&nbsp; const { activeStep, totalSteps } = props;&nbsp; return (&nbsp; &nbsp; <div className="progressBar">&nbsp; &nbsp; &nbsp; {[...Array(totalSteps).keys()].map((step) => {&nbsp; &nbsp; &nbsp; &nbsp; // logic to compare against activeStep&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div key={step}>Hello</div>&nbsp; &nbsp; &nbsp; &nbsp; ))}}&nbsp; &nbsp; </div>&nbsp; );};

Answer 3

您可以为此动态创建一个数组const ProgressBar = (props) => {&nbsp; const { activeStep, totalSteps } = props;&nbsp; const steps = new Array(totalSteps).fill().map((_,index)=>{&nbsp; &nbsp; const stepIndex = index+1;&nbsp; &nbsp; const activeClassName = stepIndex === activeStep ? 'active':undefine;&nbsp; &nbsp; return <div className={activeClassName}>{stepIndex}</div>&nbsp; });&nbsp; return <div className="progressBar">{display}</div>;};

Answer 4

好吧，您确实需要一个元素数组，那么创建数组有什么问题呢？const ProgressBar = (props) => {&nbsp; &nbsp; const { activeStep, totalSteps } = props;&nbsp; &nbsp; const steps = (new Array(totalSteps))&nbsp; &nbsp; &nbsp; &nbsp; .fill(undefined)&nbsp; &nbsp; &nbsp; &nbsp; .map((step, index) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // If the step is active (or past) step, give it a grey background&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div key={index} style={{ backgroundColor: index + 1 <= activeStep ? 'grey' : 'white' }}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {index+1}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; ));&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; return <div className="progressBar">{steps}</div>;};像这样的东西将创建一个元素数组并相应地为它们着色