React学习案例二十六

Posted 2022-02-19 hhh江月

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React学习案例二十六相关的知识，希望对你有一定的参考价值。

React学习案例二十六

<!DOCTYPE html>
<html>
<script type="text/babel">
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 = <LogoutButton onClick=this.handleLogoutClick />;
     else 
      button = <LoginButton onClick=this.handleLoginClick />;
    

    return (
      <div>
        <Greeting isLoggedIn=isLoggedIn />
        button
      </div>
    );
  


function UserGreeting(props) 
  return <h1>欢迎回来!</h1>;


function GuestGreeting(props) 
  return <h1>请先注册。</h1>;


function Greeting(props) 
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) 
    return <UserGreeting />;
  
  return <GuestGreeting />;


function LoginButton(props) 
  return (
    <button onClick=props.onClick>
      登陆
    </button>
  );


function LogoutButton(props) 
  return (
    <button onClick=props.onClick>
      退出
    </button>
  );


ReactDOM.render(
  <LoginControl />,
  document.getElementById('example')
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 = <LogoutButton onClick=this.handleLogoutClick />;
     else 
      button = <LoginButton onClick=this.handleLoginClick />;
    

    return (
      <div>
        <Greeting isLoggedIn=isLoggedIn />
        button
      </div>
    );
  


function UserGreeting(props) 
  return <h1>欢迎回来!</h1>;


function GuestGreeting(props) 
  return <h1>请先注册。</h1>;


function Greeting(props) 
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) 
    return <UserGreeting />;
  
  return <GuestGreeting />;


function LoginButton(props) 
  return (
    <button onClick=props.onClick>
      登陆
    </button>

以上是关于React学习案例二十六的主要内容，如果未能解决你的问题，请参考以下文章