如何在ReactJs样式中有条件地调用不同的className

Question

我的React组件中有一个progressBar.progressBar如下图所示：

所以，当我进入第二页时，样式如下所示：

下一张图片用于第三页：

所以，我要做的就是为第二页创建样式。

代码如下：

 <div className={classes.sceProgressBar}> <div className={classes.sceProgressBarText}> <i className={ 'fas fa-check ' + this.progressBarStyleHandler} /> </div> </div> <hr className={classes.sceProgressBarUnderline} /> <div className={classes.sceProgressBarSecondText}> <div className={classes.sceProgressBarText}>2</div> <hr className={classes.sceProgressBarSecondUnderline} /> </div> <div className={classes.sceProgressBarThirdText}> <div className={classes.sceProgressBarText}>3</div> </div> 

现在我想要的是，我想使其成为一个通用组件，这样就不必为每个页面添加样式，我可以直接导入页面并通过在道具中传递页面详细信息来显示该页面是哪个页面。 。

因此，我添加了9个州：

 this.state = { firstPage: false, //white background for Progress Bar secondPage: false, thirdPage: false, firstPageDisplay: false, //green background for Progress Bar secondPageDisplay: false, tihrdPageDisplay: false, firstPageCompleted: false, //tick mark for Progress Bar secondPageCompleted: true, thirdPageCompleted: false }; 

并且，我添加了一个函数，该函数将检查状态值来确定它所在的页面，该函数如下所示：

 progressBarStyleHandler = () => { let progressbarClassname; if (this.state.firstPageCompleted) { progressbarClassname = classes.sceCheckIcon; } return progressbarClassname; } 

但是对于我当前的页面，该函数无法正常工作，即它没有采用className。 我的代码有什么问题？有人可以帮我吗？ 另外，如果有人可以提出更好的方法，我也会照做。

Answer 1

您实际上并没有在调用样式处理程序。

您需要具有className={'fas fa-check ' + this.progressBarStyleHandler()}而不是className={'fas fa-check ' + this.progressBarStyleHandler} 。

但是，您每页管理三个布尔值的方法将无法很好地扩展。 如果您想重新使用此组件并执行其他步骤怎么办？ 我建议采用以下方法：

function Step({ number, status="NOT_DONE" }) {
  switch (status) {
    case "DONE":
      return <div className="done"><i className="fas fa-check"/></div>
    case "CURRENT":
      return <div className="active">{number}</div>
    case "NOT_DONE":
    default:
      return <div className="not-done">{number}</div>
  }
}

function ProgressBar({ numberOfSteps = 0, currentStep = 0 }) {
  if (!numberOfSteps) return null;

  const steps = [];
  for (let i = 0; i < numberOfSteps; i++) {
    const status = i < currentStep ? 'DONE' : i === currentStep ? 'CURRENT' : 'NOT_DONE';
    steps.push(<Step number={i} status={status} />)
  }

  return (
    <div>
      {steps}
    </div>
  )
}

然后可以像<ProgressBar numberOfSteps={3} currentStep={1}/>