3.jsx的绑定属性.html 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <script src="./babel.min.js"></script>
  8. <script src="./react.development.js"></script>
  9. <script src="./react-dom.development.js"></script>
  10. <style>
  11. .title {
  12. color: red
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <div id="root"></div>
  18. <script type="text/babel">
  19. let element = (
  20. <div>
  21. <label htmlFor="same">姓名</label>
  22. <input id="same" type="text" placeholder='请输入姓名' tabIndex='1' />
  23. <br />
  24. <label htmlFor="age">年龄</label>
  25. <input id="age" type="text" placeholder='请输入年龄' tabIndex='3' />
  26. <br />
  27. <label htmlFor="address">地址</label>
  28. <input id="address" type="text" placeholder='请输入地址' tabIndex='2' />
  29. <br />
  30. </div>
  31. )
  32. let getRoot = document.getElementById("root");
  33. ReactDOM.createRoot(getRoot).render(element);
  34. </script>
  35. </body>
  36. </html>