2.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. </head>
  11. <body>
  12. <div id="root"></div>
  13. <script type="text/babel">
  14. /* vue 的动态渲染使用 {{}}
  15. react 的动态渲染使用 {} 花括号中可以是任何表达式
  16. */
  17. let obj ={
  18. name:'张三',
  19. age:18
  20. }
  21. let food = {
  22. name:'西瓜',
  23. price:20
  24. }
  25. function fn(){
  26. return '我是一个函数'
  27. }
  28. let str = '记得笑一笑'
  29. // const happy = <h2>你今天开心嘛? {str + obj.name + ' 今年 ' + obj.age +' 岁了'} {fn()}</h2>
  30. function getFood(food){
  31. // 模版字符串
  32. return `${food.name} 价格是 ${food.price}`
  33. }
  34. const happy = <h2>{getFood(food)}</h2>
  35. const getRoot = document.getElementById('root')
  36. ReactDOM.createRoot(getRoot).render(happy)
  37. </script>
  38. </body>
  39. </html>