如何在jsx中使用if else条件？答案

【问题标题】：how to use if else condition in jsx?如何在jsx中使用if else条件？
【发布时间】：2018-09-12 00:32:48
【问题描述】：

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;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

我有上面的代码，这里我在每个条件下都使用布局，实际的<Layout> 组件真的很重，所以我只想使用一次布局并尝试重写代码，如下面的代码。但它除了布局之外什么都不渲染。

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

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

export default Wrapper;

【问题讨论】：

标签： javascript reactjs ecmascript-6 jsx

【解决方案1】：

这样的事情怎么样？

class Wrapper extends React.Component {
    render() {
        return (
            <Layout>
                {this.props.loading &&
                    <Loader />
                }
                {this.props.error &&
                    <Error errorMsg={this.props.error} />
                }
                {this.props.succes &&
                    <h1>success</h1>
                }
            </Layout>
        );
    }
}

export default Wrapper;

【讨论】：

【解决方案2】：

由于您忘记返回元素，默认情况下函数返回未定义。您定义了一个不会自动返回结果的iife，您需要这样做。

这样写：

{(()=>{
    if (this.props.isLoading) {
        return <Loader />
    }else if(this.props.isError){
        return <Error errorMsg={this.props.error} />
    }else if(this.props.isSuccess){  
        return <h1>success</h1>   
    }

})()}

考虑这个例子使图片更清晰，在这种情况下renderElement 函数将返回未定义，并且不会渲染任何内容。

render(){
    return (
        <div>
            {this.renderElement()}
        </div>
    )
}


// it will not return anything    
renderElement(){
    if (this.props.isLoading) {
        <Loader />
    }else if(this.props.isError){
        <Error errorMsg={this.props.error} />
    }else if(this.props.isSuccess){  
        <h1>success</h1>   
    }
}

【讨论】：

【解决方案3】：

class Wrapper extends React.Component {

  render() {
   let content, message;

   this.props.error ? message = <Error errorMsg={this.props.error}> : null
   this.props.success ? message =  <h1>success</h1> : null
   this.props.isLoading ? content = <Loader/> : content = message

   return (
      <Layout>
         {content}
      </Layout>
    )}
}

export default Wrapper;

【讨论】：