lovecoding
/
VIP20


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
							<!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>jsx-绑定属性</title>
    <script src="../babel.min.js"></script>
    <script src="../react.development.js"></script>
    <script src="../react-dom.development.js"></script>
    <style>
      .h3-red {
        color: red;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>

    <script type="text/babel">
      // 在开发UI时，jsx的操作会像HTML标签那样去指定各种属性。
      // 那么 如果可以的话 JSX 属性绑定是怎样的
      // let element = (
      //   <h3 id="hello" className="h3-red">
      //     Hello, React.
      //   </h3>
      // );

      /**
       *! 1. jsx元素必须闭合
       *! 2. 在jsx中注释内容的话 需要使用 绑定语法
       */

      let element = (
        <div>
          <label htmlFor="name">姓名：</label>
          {/* jsx元素必须闭合*/}
          <input id="name" type="text" placeholder="输入姓名..." tabIndex="1" />
          <br />
          <label htmlFor="xueli">学历：</label>
          <input
            id="xueli"
            type="text"
            placeholder="输入学历..."
            tabIndex="3"
          />
          <input type="text" placeholder="干扰..." tabIndex="2" />
        </div>
      );

      ReactDOM.createRoot(document.getElementById('root')).render(element);
    </script>
  </body>
</html>