React文档：条件渲染

在React中，可以创建不同的组件来封装各种需要的行为，还可以根据应用的状态变化只渲染其中一部分。
使用 if 或条件运算符来创建表示当前状态的元素，然后让React根据他们来更新UI。

Example：
无状态组件：

function UserGreeting(props){
  return 
Welcome back !
;
}
function GuestGreeting(props){
  return 
Please sign up.
;
}

//登录组件
function LoginButton(props) {
  return(
    Login
  );
}
//注销组件
function LogoutButton(props) {
  return(
    Logout
  );
}

创建一个 Greeting 组件，根据用户是否登录来显示其中之一：

function Greeting(props){
  const isLoggedIn = props.isLoggedIn ;
  if(isLoggedIn ）{
      return ;
  }
  return ;
}

ReactDOM.render(
  ,
document.getElementById('root')
);

创建一个名为 LoginControl 的有状态组件：
它会根据当前的状态来渲染或, 它也将渲染前面例子中的.

class LoginControl extends React.Component {
    constructor(props){
        super(props);
        this.handleLoginClick = this.handleLoginClick.bind(this);
        this.handleLogoutClick = this.handleLogoutClick.bind(this);
        this.state={
            isLoggedIn: false
        };

    }
    handleLoginClick(){
        this.setState({isLoggedIn: true});
    }
    handleLogoutClick(){
        this.setState({isLoggedIn: false});
    }

    render(){
        const isLoggedIn = this.state.isLoggedIn;

        let button = null;
        if(isLoggedIn){
            button = ;
        }else{
            button = ;
        }

        return(
            

                
                {button}
            
        );
    }
}
ReactDOM.render(
    ,
    document.getElementById('root')
);

阻止组件渲染

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

根据属性warn的值条件渲染，
如果warn的值是false，则组件不会渲染：

if (!props.warn) {
return 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')
);