话不多说直接上代码!
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 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <!-- 主意这里的script连的是我本地的 --> 9 <script src="./react.development.js"></script> 10 <script src="./react-dom.development.js"></script> 11 <script src="./babel.min.js"></script> 12 </head> 13 <body> 14 <div id="root"> 15 16 </div> 17 </body> 18 <script type="text/babel"> 19 //父亲 20 class Abox extends React.Component{ 21 constructor(props) { 22 super(props); 23 this.state = { 24 arr: [{ 25 "userName": "fangMing", "text": "123333", "result": true 26 }, { 27 "userName": "zhangSan", "text": "345555", "result": false 28 }, { 29 "userName": "liSi", "text": "567777", "result": true 30 }, { 31 "userName": "wangWu", "text": "789999", "result": true 32 },] 33 } 34 } 35 render() { 36 return ( 37 <div> 38 <Son arr={this.state.arr}></Son> 39 </div> 40 ) 41 } 42 } 43 44 45 46 47 //儿子 48 class Son extends React.Component{ 49 constructor(props) { 50 super(props); 51 } 52 53 render() { 54 console.log(this.props.arr) 55 return ( 56 <div className="list"> 57 <ul> 58 { 59 this.props.arr.map(item => { 60 return ( 61 <li key={item.userName}> 62 {item.userName} 评论是:{item.text} 63 </li> 64 ) 65 }) 66 } 67 </ul> 68 69 </div> 70 ) 71 } 72 } 73 74 ReactDOM.render( 75 <div> 76 <Abox></Abox> 77 </div>, 78 document.getElementById("root") 79 ) 80 </script> 81 </html>