2_jsx-数据渲染.html 1.0 KB

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. <!--
  14. vue 动态渲染 {{}} 模板语法
  15. reacr 表达是 {}可以运算
  16. -->
  17. <script type="text/babel">
  18. let cloudy = '多云'
  19. let useName={
  20. firstName:'面',
  21. lastName:'条'
  22. }
  23. // const dada = <h1>太阳好亮{cloudy}</h1>
  24. // const sun = <h1>太阳好亮{false + 1 + 'hi'}</h1>
  25. const didi = <h1>好大一个太阳{false + 1 + 'hello' + useName.firstName}</h1>
  26. function getName(userName) {
  27. return `${useName.firstName} ${useName.lastName}`
  28. }
  29. const getRoot = document.getElementById('root');
  30. ReactDOM.createRoot(getRoot).render(dada)
  31. </script>
  32. </body>
  33. </html>