Как делать вложенные операторы if в ReactJs?

Question

У меня есть что-то вроде этого.

render(){ 
    if(//loading){ 
     return (<div>loading</div>); 
    } 
    else{ 
     if(//has results){ 
      return (
        this.props.reducer.results.map((result, i) => { 
          return <Result key={'credit-card-result-' + i} >{result}</Result>; 
        }) 
      ); 
     } 
     else { 
      return (
       <div>no results found </div> 
      ); 
     } 
    } 
} 

но это не работает. Я также хотел сделать elseif, но это тоже не сработало.

Answer 1

Мне нравится использовать переменные Element и иметь один оператор return. Используя этот метод, вы можете сделать свою условную логику, как это:

render() { 
    let returnThis = null; 
    if(//loading){ 
     returnThis = <div>loading</div>; 
    if(//has results){ 
     returnThis = this.props.reducer.results.map((result, i) => { 
         return <Result key={'credit-card-result-' + i} >{result}</Result>; 
       }) 
     ); 
    } 
    else { 
     returnThis = <div>no results found </div>; 
    } 

    return (
     <div> 
      {returnThis} 
     </div> 
    ); 
} 

А вот еще некоторая информация об их условном рендеринга: https://facebook.github.io/react/docs/conditional-rendering.html

Answer 2

Попробуйте this

const { Component, PropTypes } = React; 

class Result extends Component { 
    render() { 
    return (
     <div> 
     {this.props.children} 
     </div> 
    ); 
    } 
} 

class MyComponent extends Component { 
    render(){ 
    const reducer = { 
      results: ['A', 'B', 'C', 'D', 'E'] 
     }; 
    const loading = false; 
    const hasResults = true; 

     if (loading){ 
      return (<div>loading</div>); 
     } else { 
      if (hasResults) { 
       return (
      <div>hey 
      {reducer.results.map((result, i) => { 
       return <Result key={'credit-card-result-' + i}>{result}</Result>; 
      })} 
      </div> 
     ); 
      } else { 
       return (
        <div>no results found </div> 
       ); 
      } 
     } 
    } 
} 



ReactDOM.render(
    <MyComponent />, 
    document.getElementById('root') 
);