lovecoding
/
web0715


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- jsx 语法浏览器不识别 jsx => js 浏览器可识别的语言 -->
    <script src="./babel.min.js"></script>
    <!-- react的核心库 -->
    <script src="./react.development.js"></script>
    <!-- 解析react中的dom库 -->
    <script src="./react-dom.development.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      let root = ReactDOM.createRoot(document.getElementById("root"));
      /**
       * 条件判断：
       * if/else/else-if
       * switch-case
       * 三元判断
       */
      function App() {
        return <News />;
      }
      /**
       * 登录逻辑
       * 逻辑：用户 => 首页 ； 非用户 => 登录页
       * 本地存储
       * 
       * 类组件与函数组件 分别实现
       */
    
      class News extends React.Component {
        constructor() {
          super();
          this.state = {
            token: JSON.parse(localStorage.getItem("token")),
            msg: {
              user: "小小",
              name: 10,
            },
          };
        }
        render() {
          let { token } = this.state;
          // return (
          //     <div>
          //         if(token) {
          //             <h1>已登录</h1>
          //         } else {
          //             <div>
          //                 <h2>未登录</h2>
          //                 <button>请登录</button>
          //             </div>
          //         }
          //     </div>
          // )
          //   return token ? (
          //     <h1>已登录</h1>
          //   ) : (
          //     <div>
          //       <h2>未登录</h2>
          //       <button>请登录</button>
          //     </div>
          //   );
          if (token) {
            return <div>已登录</div>;
          } else {
            return (
              <div>
                <h2>未登录</h2>
                {/*点击请登录 存储token并跳转登录成功页面*/}
                <button>请登录</button>
              </div>
            );
          }
        }
      }
      root.render(<App />);
    </script>
  </body>
</html>