react的条件渲染(或者组件渲染)五种方式 --开发基础总结

1.使用if的方式判断是否渲染某个组件

function UserGreeting(props) {
  return 
Welcome back!
;
}

function GuestGreeting(props) {
  return 
Please sign up.
;
}

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

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

2.使用元素变量来存放需要展示的组件

function LoginButton(props) {
  return (
    
      Login
    
  );
}

function LogoutButton(props) {
  return (
    
      Logout
    
  );
}

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;
    if (isLoggedIn) {
      button = ;
    } else {
      button = ;
    }

    return (
      

        
        {button}
      
    );
  }
}

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

3.使用 与运算符 && 来控制是否展示哪个组件

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')
);

4.使用三目运算符来判断是否展示哪一个组件

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

      {isLoggedIn
        ? 
        : 
      }
    
  );
}

5.通过判断条件来阻止是否渲染
在组件的 render 方法中返回 null 并不会影响组件的生命周期。示例中，componentDidUpdate 依然会被调用。

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(state => ({
      showWarning: !state.showWarning
    }));
  }

  render() {
    return (
      

        
        
          {this.state.showWarning ? 'Hide' : 'Show'}
        
      
    );
  }
}

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