react的jsx中使用if和else来判断渲染组件，报错

Question

 if (isShow) {
      return <LoginA />;
    } else {
      return <LoginBWithRouter />;
    }

这样子直接写在hook函数的return中会报错，为什么会报错？

Answer 1

在render里是不行的 。你可以用三目或者一个函数。

render(){
      return(
          <div>
              {
                  isShow?<LoginA />: <LoginBWithRouter />
              }
          </div>
      )
  }

 //函数

  isShowFn=(show)=>{ //建议多个 if这样 三目 只适合两个if。 多了嵌套 可读性很差
    if (isShow) {
        return <LoginA />;
      } else {
        return <LoginBWithRouter />;
      }
  }
  render(){
    return(
        <div>
            {
                this.isShowFn(isShow);
            }
        </div>
    )
}