123456789101112131415161718192021222324252627282930313233343536373839 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- <script src="../babel.min.js"></script>
- <script src="../react.development.js"></script>
- <script src="../react-dom.development.js"></script>
- </head>
- <body>
- <div id="root"></div>
- <script type="text/babel">
- // 函数组件 首字母要大写
- // 函数组件中 null undefined boolean Object 无法渲染
- // 渲染object 会报错
- function MyCom(){
- return (
- <div>
- <h2>我是一个函数组件</h2>
- {1234}
- {"我是一个字符串"}
- {[1,2,3,4,5]}
- {null}
- {undefined}
- {true}
- {false}
- {/*
- 函数组件中不能渲染对象
- {{"name":"张三"}}
- */}
- </div>
- )
- }
- let element = <MyCom/>
- ReactDOM.createRoot(document.getElementById('root')).render(element)
- </script>
- </body>
- </html>
|