react父子组件之间传值

在单页面里面,父子组件传值是比较常见的,之前一直用vue开发,今天研究了一下react的父子组件传值,和vue差不多的思路,父组件向子组件传值,父通过初始state,子组件通过this.props进行接收就可以了;子组件向父组件传值需要绑定一个事件,然后事件是父组件传递过来的this.props.event来进行值的更替,话不多说,上代码:

父组件向子组件传值:

父组件Comment.js:

 1 import React from "react"
 2 import ComentList from "./ComentList"
 3  
 4 class Comment extends React.Component {
 5     constructor(props) {
 6         super(props);
 7         this.state = {
 8             arr: [{
 9                 "userName": "fangMing", "text": "123333", "result": true
10             }, {
11                 "userName": "zhangSan", "text": "345555", "result": false
12             }, {
13                 "userName": "liSi", "text": "567777", "result": true
14             }, {
15                 "userName": "wangWu", "text": "789999", "result": true
16             },]
17         }
18     }
19  
20  
21  
22    
23  
24     render() {
25         return (
26             <div>
27                 <ComentList arr={this.state.arr}> //这里把state里面的arr传递到子组件
28                 </ComentList>
29                
30             </div>
31  
32         )
33     }
34 }
35  
36 export default Comment;

 

子组件ComentList.js:

 1 import React from "react"
 2  
 3 class ComentList extends React.Component {
 4     constructor(props) {
 5         super(props);
 6  
 7     }
 8     render() {
 9         return (
10             <div className="list">
11                 <ul>
12                     {
13                         this.props.arr.map(item => { //这个地方通过this.props.arr接收到父组件传过来的arr,然后在{}里面进行js的循环
14                             return (
15                                 <li key={item.userName}>
16                                     {item.userName} 评论是:{item.text}
17                                 </li>
18                             )
19                         })
20                     }
21                 </ul>
22              
23             </div>
24         )
25     }
26 }
27  
28 export default ComentList;

 

 

 父组件向子组件传值是比较容易的,我们来看一下效果:

 

好了,我们开始重头戏,

子组件向父组件传值,

同样是父组件:

 1 import React from "react"
 2 import ComentList from "./ComentList"
 3  
 4 class Comment extends React.Component {
 5     constructor(props) {
 6         super(props);
 7         this.state = {
 8             parentText: "this is parent text",
 9    
10             arr: [{
11                 "userName": "fangMing", "text": "123333", "result": true
12             }, {
13                 "userName": "zhangSan", "text": "345555", "result": false
14             }, {
15                 "userName": "liSi", "text": "567777", "result": true
16             }, {
17                 "userName": "wangWu", "text": "789999", "result": true
18             },]
19         }
20     }
21  
22     fn(data) {
23         this.setState({
24             parentText: data //把父组件中的parentText替换为子组件传递的值
25         },() =>{
26            console.log(this.state.parentText);//setState是异步操作,但是我们可以在它的回调函数里面进行操作
27         });
28  
29     }
30  
31  
32  
33     render() {
34         return (
35             <div>
36                 //通过绑定事件进行值的运算,这个地方一定要记得.bind(this),
37             不然会报错,切记切记,因为通过事件传递的时候this的指向已经改变
38                 <ComentList arr={this.state.arr} pfn={this.fn.bind(this)}>
39                 </ComentList>
40                 <p>
41                     text is {this.state.parentText}
42                 </p>
43         
44             </div>
45  
46         )
47     }
48 }
49  
50 export default Comment; 

子组件:

 1 import React from "react"
 2  
 3 class ComentList extends React.Component {
 4     constructor(props) {
 5         super(props);
 6         this.state = ({
 7             childText: "this is child text"
 8         })
 9  
10     }
11     clickFun(text) {
12         this.props.pfn(text)//这个地方把值传递给了props的事件当中
13     }
14     render() {
15         return (
16             <div className="list">
17                 <ul>
18                     {
19                         this.props.arr.map(item => {
20                             return (
21                                 <li key={item.userName}>
22                                     {item.userName} 评论是:{item.text}
23                                 </li>
24                             )
25                         })
26                     }
27                 </ul>
28                 //通过事件进行传值,如果想得到event,可以在参数最后加一个event,
29                 这个地方还是要强调,thisthisthis
30                 <button onClick={this.clickFun.bind(this, this.state.childText)}>
31                     click me
32                 </button>
33             </div>
34         )
35     }
36 }
37  
38 export default ComentList; 

 

before:

after:

 

 最后想说一点,如果嵌套的父子组件很深好几层,这个时候我想你应该考虑用状态管理工具redux了

posted @ 2020-10-29 23:51  我爱吃小丸子  阅读(429)  评论(0编辑  收藏  举报