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

Question

 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> 

i have the above code , here i am using layout in every condition , actual <Layout> component is really heavy , so i want to use layout only once and trying to rewrite the code something like the below code. but its not rendering anything except 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; 

Answer 1

How about something like this?

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;

Answer 2

Because you forgot to return the elements, by default function returns undefined. You defined a iife that will not return the result automatically, you need to do that.

Write it like this:

{(()=>{
    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>   
    }

})()}

Consider this example to make the picture more clear, in this case renderElement function will return undefined, and nothing will get rendered.

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

Answer 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;