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

react中是否允许使用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>
  }
}

render（）{
如果（this.state.navigation====‘欢迎’）{
返回
}
else if（this.state.naviation==='page1'）{
返回
}
else if（this.state.naviation==='page2'）{
返回
}
else if（this.state.naviation==='page3'）{
返回
}
else if（this.state.naviation==='page4'）{
返回
}
else if（this.state.naviation==='page5'）{
返回
}
否则{
返回错误！！
}
}

使用react可以进行您正在进行的条件渲染

看起来您犯了一个小的拼写错误（导航而不是导航），这导致了意外的行为

考虑以下版本，它使用开关/外壳块代替-这将最大限度地减少所需的代码，从而有助于防止此类错误：

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>
    }
  }
}

render（）{
//仅调用this.state.navigation变量一次，而不是
//对于每个返回案例，这是不容易出错的
开关（this.state.navigation）{
欢迎个案：{
返回
}
案例“第1页”：{
返回
}
案例“第2页”：{
返回
}
案例“第3页”：{
返回
}
案例“第4页”：{
返回
}
案例“第5页”：{
返回
}
默认值：{
返回错误！！
}
}
}

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

您应该使用react router来确定要呈现的页面/组件。看起来您错放了“导航”。否则，该代码应该可以工作