Reactjs 如何创建一个If组件

查看react文档中的If-Else in JSX部分.

在JSX中，不能将语句放在大括号中，只能放在表达式中.如果你不知道JavaScript中表达式和语句之间的区别，请阅读这article条.这个限制是因为JSX会分解成函数调用，在JavaScript中不能使用if语句作为函数的参数.但是，您可以使用布尔运算符(&&、||和? :)来完成类似的工作.它们是表达式，因此可以放入JSX生成的构造函数调用中，它们的短路计算与if语句中使用的相同.

<div>
    {(true
        ? <div>Showing true item</div>     
        : <div>Never showing false item</div>
    )}
</div>
<p>My name is {this.name || "default name"}</p>

此外，React将null和false视为"空组件"，不会在真实DOM中渲染(目前它在幕后使用相同的noscript技巧).当您不需要"else"分支时，这很有用.详情见False in JSX.

<div>
    {shouldIncludeChild ? <ChildComponent/> : false}
</div>

至于你提到的If组件，它有一个问题，就是在它当前的形式下，即使条件是错误的，它也会判断它的子组件.当If主体仅在条件为真时才有意义时，这可能会导致错误:

<If condition={person !== null}>
    //This code throws an exception if this.person is null
    <div>{person.name}</div>
</If>

您可以通过让if组件作为函数而不是子组件列表接收正文来解决这个问题，但它更详细:

<If condition={person !== null} body={function(){
    return <div>{person.name}</div>
}/>

最后，由于IF组件是无状态的，所以应该考虑使用一个纯函数而不是一个新的组件类，因为这会使"IF"透明的react 协调算法.如果使用If组件，则<div>和<If><div>将被视为不兼容，React将执行完全重画，而不是try 将新组件与旧组件合并.

// This custom if function is for purely illustrative purposes
// However, this idea of using callbacks to represent block of code
// is useful for defining your own control flow operators in other circumstances.
function myCustomIf(condition, onTrue, onFalse){
    onTrue  = onTrue  || function(){ return null }        
    onFalse = onFalse || function(){ return null }
    if(condition){
        return onTrue();
    }else{
        return onFalse();
    }
}

<div>    
    {myCustomIf(person !== null, function(){
         return <div>{person.name}</div>
     })}
</div>