如何在JSX中使用if-else条件判断？

在React的JSX语法里，我们没办法直接在渲染的JSX代码块中写入if-else语句，但可以通过提取独立方法的方式，优雅地实现条件渲染逻辑。下面是一个完整的示例组件，演示如何根据不同的props状态返回对应的JSX内容：

class Wrapper extends React.Component {
  content() {
    if (this.props.isLoading) {
      return (
        <Layout>
          <Loader />
        </Layout>
      );
    } else if (this.props.isError) {
      return (
        <Layout>
          <Error errorMsg={this.props.error} />
        </Layout>
      );
    } else {
      return (
        <Layout>
          {this.props.isSuccess ? <h1>success</h1> : <h1>some failure</h1>}
        </Layout>
      );
    }
  }

  render() {
    return this.content();
  }
}

export default Wrapper;

逻辑说明： #

• 我们把条件判断逻辑封装在content()方法中，根据组件接收的isLoading、isError、isSuccess这几个props的状态，分别返回不同的JSX结构
• 在正常状态（既不是加载中也没有错误）时，还嵌套使用了三元表达式做进一步的细粒度判断，这也是JSX中常用的简洁条件渲染方式
• 最后在render()方法里直接调用content()，就能把对应状态的内容渲染出来

内容的提问来源于stack exchange，提问作者sravan ganji