3.绑定属性.html 1.0 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="../js/babel.min.js"></script>
  8. <script src="../js/react.development.js"></script>
  9. <script src="../js/react-dom.development.js"></script>
  10. <style>
  11. .head1 {
  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. <h1 className="head1"></h1>
  22. <div>
  23. <label htmlFor="username">用户名</label>
  24. <input type="text" id="username" tabIndex="1"/>
  25. <br/>
  26. <label htmlFor="password">密码</label>
  27. <input type="password" id="password" tabIndex="3"/>
  28. <br/>
  29. <label htmlFor="email">邮箱</label>
  30. <input type="email" id="email" tabIndex="2"/>
  31. <br/>
  32. </div>
  33. </div>
  34. )
  35. const root = document.getElementById('root')
  36. ReactDOM.createRoot(root).render(element)
  37. </script>
  38. </body>
  39. </html>