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) => {

  const { activeStep, totalSteps } = props;

  const steps = [];

  for (let i = 1; i <= totalSteps; i++) {

    steps.push(<div>Hello</div>);

  }

  

  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) => {

  const { activeStep, totalSteps } = props;

  const displayProgressBar = () =>

    [...Array(totalSteps).keys()].map((step) => <div key={step}>Hello</div>);

  return <div className="progressBar">{displayProgressBar()}</div>;

};

不过，内联数组可能更简单。

const ProgressBar = (props) => {

  const { activeStep, totalSteps } = props;

  return (

    <div className="progressBar">

      {[...Array(totalSteps).keys()].map((step) => {

        // logic to compare against activeStep

        return (

          <div key={step}>Hello</div>

        ))}}

    </div>

  );

};

Answer 3

您可以为此动态创建一个数组

const ProgressBar = (props) => {

  const { activeStep, totalSteps } = props;

  const steps = new Array(totalSteps).fill().map((_,index)=>{

    const stepIndex = index+1;

    const activeClassName = stepIndex === activeStep ? 'active':undefine;

    return <div className={activeClassName}>{stepIndex}</div>

  });

  return <div className="progressBar">{display}</div>;

};

Answer 4

好吧，您确实需要一个元素数组，那么创建数组有什么问题呢？

const ProgressBar = (props) => {

    const { activeStep, totalSteps } = props;

    const steps = (new Array(totalSteps))

        .fill(undefined)

        .map((step, index) => (

            // If the step is active (or past) step, give it a grey background

            <div key={index} style={{ backgroundColor: index + 1 <= activeStep ? 'grey' : 'white' }}>

                {index+1}

            </div>

        ));

    

    return <div className="progressBar">{steps}</div>;

};

像这样的东西将创建一个元素数组并相应地为它们着色