React的父子传值（父传子）

话不多说直接上代码!
 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>
React的父子传值（父传子）

猜你喜欢
