Question

反应中是否允许if / else语句？我的类的render方法中有一个if / else语句。看来，if / else逻辑仅在第一个if语句之后。当满足第一个条件时，该函数将返回期望值。如果不满足第一个条件，则所有我的else if语句都将被忽略，并返回else值。

render() {
  if(this.state.navigation === 'welcome') {
    return <Welcome goToPage1={this.goToPage1} goToPage2={this.goToPage2} goToPage3={this.goToPage3} goToPage4={this.goToPage4} goToPage5={this.goToPage5} />
  }
  else if(this.state.naviation === 'page1') {
    return <Page1 returnHome={this.returnHome} />
  }
  else if(this.state.naviation === 'page2') {
    return <Page2 returnHome={this.returnHome} />
  }
  else if(this.state.naviation === 'page3') {
    return <Page3 returnHome={this.returnHome} />
  }
  else if(this.state.naviation === 'page4') {
    return <Page4 returnHome={this.returnHome} />
  }
  else if(this.state.naviation === 'page5') {
    return <Page5 returnHome={this.returnHome} />
  }
  else {
    return <h1>ERROR!!</h1>
  }
}

Answer 1

react可以照常进行条件渲染。

您似乎犯了一个较小的拼写错误（导航而不是导航），这导致了意外的行为。

考虑以下修订，改用switch / case块-这将所需的代码减至最少，从而有助于防止此类错误：

render() {

  // Only invoke the this.state.navigation variable once, rather than
  // for each return case, which is less error prone
  switch(this.state.navigation) {

    case 'welcome': {
      return <Welcome goToPage1={this.goToPage1} goToPage2={this.goToPage2} goToPage3={this.goToPage3} goToPage4={this.goToPage4} goToPage5={this.goToPage5} />
    }

    case 'page1': {
      return <Page1 returnHome={this.returnHome} />
    }

    case 'page2': {
      return <Page2 returnHome={this.returnHome} />
    }

    case 'page3': {
      return <Page3 returnHome={this.returnHome} />
    }

    case 'page4': {
      return <Page4 returnHome={this.returnHome} />
    }

    case 'page5': {
      return <Page5 returnHome={this.returnHome} />
    }

    default: {
      return <h1>ERROR!!</h1>
    }
  }
}

Answer 2

对于路由，您应该使用React Router，因为最终您将要开始使用参数和身份验证，所以为什么要重新发明轮子呢？

是否可以在React render中编写if / else语句

2 个答案: