条件渲染

React 中的条件渲染和 JavaScript 中的一致，使用

JavaScript 操作符

if 或

条件运算符来创建表示当前状态的元素，然后让 React 根据它们来更新 UI。

实例1

与运算符&&

因为在 JavaScript 中，true && expression 总是返回 expression，而 false && expression 总是返回 false。

因此，如果条件是 true，&& 右侧的元素就会被渲染，如果是 false，React 会忽略并跳过它

function Mailbox(props) {  const unreadMessages = props.unreadMessages;  return (    
    
      
     
Hello!
      {unreadMessages.length > 0 &&        
     
          You have {unreadMessages.length} unread messages.        
      }    
    
  );}const messages = ['React', 'Re: React', 'Re:Re: React'];ReactDOM.render(  
    ,  document.getElementById('root'));

三目运算符

render() {  const isLoggedIn = this.state.isLoggedIn;  return (    
    
           {isLoggedIn ? (        
           ) : (        
           )}    
    
  );}

阻止组件渲染

在极少数情况下，你可能希望隐藏组件，即使它被其他组件渲染。让 render 方法返回 null 而不是它的渲染结果即可实现。

function WarningBanner(props) {  if (!props.warn) {    return null;  }  return (    
    
           Warning!    
    
  );}class Page extends React.Component {  constructor(props) {    super(props);    this.state = {showWarning: true}    this.handleToggleClick = this.handleToggleClick.bind(this);  }  handleToggleClick() {    this.setState(prevState => ({      showWarning: !prevState.showWarning    }));  }  render() {    return (      
    
        
             
               {this.state.showWarning ? 'Hide' : 'Show'}              
    
    );  }}ReactDOM.render(  
    ,  document.getElementById('root'));

组件的 render 方法返回 null 并不会影响该组件生命周期方法的回调。例如，componentWillUpdate 和 componentDidUpdate 依然可以被调用。