lovecoding
/
VIP20


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>条件渲染</title>
    <script src="../../babel.min.js"></script>
    <script src="../../react.development.js"></script>
    <script src="../../react-dom.development.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      function App() {
        return (
          <div className="app">
            <div className="app-header">
              {/* <LoginTpl user={{ name: '大侠' }} /> */}
              <LoginTpl />
            </div>
          </div>
        );
      }

      // function LoginTpl({ user }) {
      //   return user ? (
      //     <span>您好，{user.name} </span>
      //   ) : (
      //     <span>
      //       您好，请登录。<button>登录</button>
      //     </span>
      //   );
      // }

      class LoginTpl extends React.Component {
        constructor() {
          super();
          const token = sessionStorage.getItem('token');
          this.state = {
            token,
            user: token ? JSON.parse(sessionStorage.getItem('user')) : {},
          };

          this.onLogin = this.onLogin.bind(this);
        }
        onLogin() {
          sessionStorage.setItem('token', '123456');
          sessionStorage.setItem('user', JSON.stringify({ name: 'daxia' }));

          this.setState({
            token: '123456',
            user: { name: 'daxia' },
          });
        }

        render() {
          let { token, user } = this.state;
          return token ? (
            <span>您好，{user.name} </span>
          ) : (
            <span>
              您好，请登录。<button onClick={this.onLogin}>登录</button>
            </span>
          );
        }
      }

      const root = ReactDOM.createRoot(document.querySelector('#root'));
      root.render(<App />);
    </script>
  </body>
</html>