1、组件编写方式的注意事项：
2、两种组件编写方式
<script type="text/babel"> function Simple(){ return <h1>这是工厂函数组件</h1> } ReactDOM.render(<Simple />,document.getElementById("root")); //注意 </script>
<script type="text/babel"> class Mycomponent extends React.Component{ render(){ //其中render是react的一个关键字 return ( <h1>这是一个复杂组件</h1> ); } } ReactDOM.render(<Mycomponent />,document.getElementById("root")); </script>
3、任务：使用复杂组件实现列表功能
1 <script type="text/babel"> 2 //3、state相当于VUE中的data 3 // 做一个遍历列表任务 4 class MyComponent extends React.Component{ 5 constructor(props){ 6 super(props); 7 this.state = { 8 msg:[ 9 ‘赵云‘, 10 ‘吉吉国王‘, 11 ‘韩信‘, 12 ‘露娜‘, 13 ], 14 } 15 } 16 render(){ 17 //取出state中的值 18 var {msg} = this.state; 19 return ( 20 <div> 21 <ul> 22 { 23 msg && msg.map((item,index)=>{ 24 return <li key={index}>{item}</li> 25 }) 26 } 27 </ul> 28 </div> 29 ) 30 } 31 } 32 ReactDOM.render(<MyComponent />,document.getElementById("root")); 33 </script>
原文：https://www.cnblogs.com/minyDong/p/12465458.html
