React学习案例二十八

Posted 2022-02-19 hhh江月

React学习案例二十八

function Greeting(props) 
    const isLoggedIn = props.isLoggedIn;
    if (isLoggedIn) 
      return <UserGreeting />;
    
    return <GuestGreeting />;
  
  
  ReactDOM.render(
    // Try changing to isLoggedIn=true:
    <Greeting isLoggedIn=false />,
    document.getElementById('root')
  );



  function LoginButton(props) 
    return (
      <button onClick=props.onClick>
        Login
      </button>
    );
  
  
  function LogoutButton(props) 
    return (
      <button onClick=props.onClick>
        Logout
      </button>
    );
  


  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;
    
      return (
        <div>
          <Greeting isLoggedIn=isLoggedIn />
          button
        </div>
      );
    
  
  

  
    handleLoginClick() 
      this.setState(isLoggedIn: true);
    
  
    handleLogoutClick() 
      this.setState(isLoggedIn: false);
    
  
    render() 
      const isLoggedIn = this.state.isLoggedIn;
      let button;
      if (isLoggedIn) 
        button = <LogoutButton onClick=this.handleLogoutClick />;
       else 
        button = <LoginButton onClick=this.handleLoginClick />;
      
  
      return (
        <div>
          <Greeting isLoggedIn=isLoggedIn />
          button
        </div>
      );
    
  
  


  render() 
    const isLoggedIn = this.state.isLoggedIn;
    return (
      <div>
        The user is <b>isLoggedIn ? 'currently' : 'not'</b> logged in.
      </div>
    );
  
  同样的，它也可以用于较为复杂的表达式中，虽然看起来不是很直观：
  
  render() 
    const isLoggedIn = this.state.isLoggedIn;
    return (
      <div>
        isLoggedIn
          ? <LogoutButton onClick=this.handleLogoutClick />
          : <LoginButton onClick=this.handleLoginClick />

      ));
    
  
    render() 
      return (
        <div>
          <WarningBanner warn=this.state.showWarning />
          <button onClick=this.handleToggleClick>
            this.state.showWarning ? 'Hide' : 'Show'
          </button>