есть ли способ сделать generi c if условие, чтобы легко расширить мои шаги? - PullRequest
0 голосов
/ 16 июня 2020

Я новичок в React, и у меня есть проект, в котором мне нужно реализовать тур по реакции на поездку в готовый инструмент.

в настоящее время у меня есть это условие if, чтобы проверить, на какой странице iam, чтобы установить правильные шаги.

if (this.props.location.pathname === '/') {
      steps = []
    } else if (this.props.location.pathname === '/matches/' || this.props.location.pathname === '/matches') {
      if (this.props.firstPartClicked === true) {
        steps = matchSiteStepsOne
      } else if (this.props.secondPartClicked === true) {
        steps = matchSiteStepsTwo
      } else {
        steps = matchSiteSteps
      }
    } else if (this.props.location.pathname.startsWith('/matches/') && this.props.location.pathname.endsWith('/edit/') && this.props.location.pathname.match('\\d+')) {
      if (this.props.firstPartClicked === true) {
        steps = matchEditorStepsOne
      } else if (this.props.secondPartClicked === true) {
        steps = matchEditorStepsTwo
      } else {
        steps = matchEditorSteps
      }
    } else if (this.props.location.pathname.startsWith('/matches/') && this.props.location.pathname.includes('sequence')) {
      if (this.props.firstPartClicked === true) {
        steps = matchSequenceStepsOne
      } else if (this.props.secondPartClicked === true) {
        steps = matchSequenceStepsTwo
      } else {
        steps = matchSequenceSteps
      }
    } else if (this.props.location.pathname.startsWith('/matches/') && this.props.location.pathname.match('\\d+')) {
      steps = matchSteps
    }

теперь у меня вопрос, есть ли способ сделать его более универсальным c, чтобы я мог легко расширять больше шагов на разных страницах без такого избыточного кода?

1 Ответ

0 голосов
/ 16 июня 2020

Вы можете немного уменьшить избыточный код, только найдя путь по имени один раз и сохранив его в переменной, как в

      pathname = this.props.location.pathname  

Это должно сделать ваши операторы if немного короче и легче для чтения. Вы также можете дедуплицировать некоторый код, если, например, вы заменили matchSiteSteps на matchSteps ['Site'] и трижды вызвали функцию с текстом, например:

if (this.props.firstPartClicked === true) {
        steps = matchStepsOne[type]
      } else if (this.props.secondPartClicked === true) {
        steps = matchStepsTwo[type]
      } else {
        steps = matchSteps[type]
      }
}
...