04 定义组件的两种方式 

 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/react.development.js"></script>
 8     <script src="../js/react-dom.development.js"></script>
 9     <script src="../js/babel.min.js"></script>
10 </head>
11 <body>
12     <div id="test1"></div>
13     <div id="test2"></div>
14 </body>
15 </html>
16 <script type="text/babel">
17     //1,定义组件
18     //方式1，工厂函数组件（简单组件）
19     function MyComponent1(){
20         return <h1>定义组件方式一</h1>
21     }
22     
23     //方式2，ES6类组件（复杂组件）
24     class MyComponent2 extends React.Component{
25         render(){
26             console.log(this);//MyComponent2的实例对象
27             return <h1>定义组件方式二</h1>
28         }
29     }
30     //2,渲染组件标签
31     ReactDOM.render(<MyComponent1/>,document.getElementById("test1"));
32     ReactDOM.render(<MyComponent2/>,document.getElementById("test2"));
33 
34 </script>

 

posted @ 2020-03-13 00:51  shanlu  阅读(271)  评论(0)    收藏  举报