如何在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

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

您需要拥有UIMotionEffect而不是CMDeviceMotion.attitude。

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

className={'fas fa-check ' + this.progressBarStyleHandler()}

然后可以像className={'fas fa-check ' + this.progressBarStyleHandler}

一样使用