2.数据渲染.html 970 B

123456789101112131415161718192021222324252627282930313233
  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. </head>
  11. <body>
  12. <div id="root"></div>
  13. <script type="text/babel">
  14. let rain = '下雨';
  15. let username = {
  16. name: '火',
  17. user: '锅',
  18. }
  19. // const snow = <h3>明天{rain},所以明天休息{false + 1 + username.name + username.user}</h3>;
  20. // const snow = <h3>明天{rain},所以明天休息</h3>;
  21. function getName(name) {
  22. return `${username.name} ${username.user}`;
  23. }
  24. const snow = <h4>{getName(username)}</h4>
  25. const getRoot = document.getElementById("root");
  26. ReactDOM.createRoot(getRoot).render(snow);
  27. </script>
  28. </body>
  29. </html>