Как условно вызывать разные имена классов в стиле ReactJs - PullRequest
Новая
       40

Как условно вызывать разные имена классов в стиле ReactJs

0 голосов
/ 19 декабря 2018

В моем компоненте React есть индикатор выполнения. Индикатор выполнения показан на рисунке ниже:

progressBar1

Итак, когда я нахожусь ввторая страница, стиль будет таким, как показано ниже:

progressBar2

И следующее изображение для третьей страницы:

progresBar3

Итак, я создал стиль для второй страницы.

Код выглядит следующим образом: 

<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.Что не так с моим кодом? Может кто-нибудь, пожалуйста, помогите мне с этим.Кроме того, если кто-то может предложить лучший способ сделать это, я буду следовать тому же самому.

1 Ответ

0 голосов
/ 19 декабря 2018

Вы на самом деле не вызываете свой обработчик стиля.

Вам нужно иметь 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}/>

...