你应该记住TERNARY运算符

:

你的代码是这样的，

render(){
    return (
        <div>
            <Element1/>
            <Element2/>
            // note: code does not work here
            { 
               this.props.hasImage ?  // if has image
               <MyImage />            // return My image tag 
               :
               <OtherElement/>        // otherwise return other element  

             }
        </div>
    )
}

if else结构的简写在JSX中可以正常工作

这个道具。hasImage ?<我的形象/>:< some therement >

你可以在DevNacho的这篇博客文章中找到其他选项，但更常见的是用速记。如果你需要一个更大的If子句，你应该写一个返回组件a或组件B的函数。

例如:

this.setState({overlayHovered: true});

renderComponentByState({overlayHovered}){
    if(overlayHovered) {
        return <OverlayHoveredComponent />
    }else{
        return <OverlayNotHoveredComponent />
    }
}

你可以从中解构你的overlayhovers。状态，如果你给它作为参数。然后在render()方法中执行该函数:

renderComponentByState(这个state university)。

仅当:

{condition1 && 
(<div> condition1 true </div>)}

对于if和else:

{condition1 ? 
(<div> condition1 true </div>)
:(<div> condition1 false </div>)}

if, else if, else:

{condition1 ? 
(<div>condition1 true</div>)
:(condition2) && 
(<div>condition2 true</div>)
:(<div>both conditions false</div>)}

四种条件渲染方式

(在功能组件的返回语句或类组件的渲染函数的返回语句中)

三元运算符

return (
    <div>     
        {
            'a'==='a' ? <p>Hi</p> : <p>Bye</p>
        } 
    </div>
)

注意:只有条件'a'==='a'为真时，<p>Hi</p>才会在屏幕上显示。否则，<p>Bye</p>将显示在屏幕上。

逻辑运算符

和& &

return (
    <div>     
        {
            'a'==='a' && <p>Hi</p>
        } 
    </div>
)

注意:只有条件'a'==='a'为真时，<p>Hi</p>才会在屏幕上显示。

或| |

export default function LogicalOperatorExample({name, labelText}) {
    
  return (
    <div>       
         {labelText || name}      
    </div>
  )
}

注意:如果labelText和name两个道具都被传递到这个组件中，那么labelText将在屏幕中呈现。但如果只有一个(name或labelText)作为道具传递，那么传递的道具将在屏幕中呈现。

如果，否则，否则如果

return ( 
        <div>     
            {
                (() => {
                    if('a'==='b') {
                            return (
                                <p>Hi</p>
                            )
                        } else if ('b'==='b') {
                            return (
                            <p>Hello</p>
                            )
                        } else {
                            return (
                                <p>Bye</p>
                            )
                        }
                })()  
            }  
        </div>  
    )

注意:必须使用匿名函数(还需要立即调用该函数)

Switch语句

return ( 
    <div>     
        {
            (() => {
                switch(true) {
                        
                    case('a'==='b'): {
                            return (
                                <p>Hello</p>
                            )
                        }
                    break;
                        
                    case('a'==='a'): {
                        return (
                            <p>Hi</p>
                        )
                    }
                    break;
                    
                    default: {
                            return (
                                <p>Bye</p>
                            )
                        }
                    break;
                    }
            })()  
        }  
    </div>  
)

注意:必须使用匿名函数(还需要立即调用该函数)

没有一个答案提到短路法

{this.props.hasImage && <MyImage />}

当然，如果你想在else逻辑上呈现一些东西，你就不能使用它。 我从react的例子中学到了这个

在更深入的扫描中，我确实看到了@ZekeDroid的评论，但我将把它作为答案，因为它可能有用。

你可以使用if, else这样的条件语句来呈现任何东西:

 render() {
    const price = this.state.price;
    let comp;

    if (price) {

      comp = <h1>Block for getting started with {this.state.price}</h1>

    } else {

      comp = <h1>Block for getting started.</h1>

    }

    return (
      <div>
        <div className="gettingStart">
          {comp}
        </div>
      </div>
    );
  }