React.js中的条件渲染

使用条件语句，可以呈现和删除特定的组件。条件处理在JavaScript和React.js中的工作方式相似

示例

function DisplayUserMessage( props ){
   const user = props.user.type;
   if(type==’Player’){
      return <h1>Player </player>;
   }
   If( type==’Admin’){
      Return <h1>Admin </h1>;
   }
}

上面的示例中使用了if语句。用户类型决定要返回的消息。

组件的局部状态在决定条件渲染时非常有用，因为状态可以灵活地在组件内部进行更改。

与逻辑&&运算符内联

function MessageSizeChecker(props) {
   const message = props.message;
   return (
      <div>
         <h1>Hello!</h1>
         {message.length > 100 &&
            <h2>
               Message size is greater than 100
            </h2>
         }
      </div>
   );
}

如果&&运算符的第一个参数计算为true，那么第二个参数将显示在屏幕上。

如果不是三元运算符则内联-

它具有类似条件的语法吗？' 第一秒';

function MessageSizeChecker(props) {
   const message = props.message;
   return (
      <div>
         <h1>Hello!</h1>
         {message.length > 100 ? ‘Message size is greater than 100’: ‘Message size is ok’}
      </div>
   );
}

该三元表达式可以在多个block语句上使用，但要理解它变得繁琐。因此，为使其简单起见，应在简单的条件下使用它。

我们可以决定要渲染的组件。

render() {
   const isPlayer = this.state.user.isPlayer;
   return (
      <div>
         { isPlayer ? (
            <Player >
            ) : (
            <Admin />
            )
         }
      </div>
   );
}

为了防止组件渲染，我们也可以返回null。但是仅从render方法返回null并不能阻止React进一步适用的生命周期