React组件传值(子传父)

 1 <script type="text/babel">
 2     //父亲
 3     class Abox extends React.Component{
 4         constructor(props) {
 5         super(props);
 6         this.state = {
 7             arr: [{
 8                 "userName": "fangMing", "text": "123333", "result": true
 9             }, {
10                 "userName": "zhangSan", "text": "345555", "result": false
11             }, {
12                 "userName": "liSi", "text": "567777", "result": true
13             }, {
14                 "userName": "wangWu", "text": "789999", "result": true
15             },]
16         }
17     }
18 
19     getchild=(v)=>{
20         console.log(v)
21     }
22 
23     render() {
24         return (
25             <div>
26                 <Son arr={this.state.arr} jieshou={this.getchild}></Son>
27             </div>
28         )
29     }
30  }
31     
32 
33 
34 
35     //儿子
36     class Son extends React.Component{
37         constructor(props) {
38         super(props)
39         this.state={
40             num:1
41         }
42     }
43     
44     zifhuanfu=(opp)=>{
45        this.props.jieshou(opp)
46     }
47     
48     render() {
49         console.log(this.props.arr)
50         return (
51             <div className="list">
52                 <ul>
53                     {
54                         this.props.arr.map(item => {
55                             return (
56                                 <li key={item.userName}>
57                                     {item.userName} 评论是:{item.text}
58                                     <button onClick={()=>this.zifhuanfu(this.state.num)}>子传父</button>
59                                 </li>
60                                 
61                             )
62                         })
63                     }
64                 </ul>
65             </div>
66         )
67     }
68     }
69 
70     ReactDOM.render(
71         <div>
72             <Abox></Abox>
73         </div>,
74         document.getElementById("root")
75     )
76 </script>