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>