react父子组件之间传值
Posted wangking
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了react父子组件之间传值相关的知识，希望对你有一定的参考价值。
在单页面里面，父子组件传值是比较常见的，之前一直用vue开发，今天研究了一下react的父子组件传值，和vue差不多的思路，父组件向子组件传值，父通过初始state，子组件通过this.props进行接收就可以了；子组件向父组件传值需要绑定一个事件，然后事件是父组件传递过来的this.props.event来进行值的更替，话不多说，上代码：
父组件向子组件传值：
父组件Comment.js:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
import React from "react"import ComentList from "./ComentList"class Comment extends React.Component { constructor(props) { super(props); this.state = { arr: [{ "userName": "fangMing", "text": "123333", "result": true }, { "userName": "zhangSan", "text": "345555", "result": false }, { "userName": "liSi", "text": "567777", "result": true }, { "userName": "wangWu", "text": "789999", "result": true },] } } render() { return ( <div> <ComentList arr={this.state.arr}> //这里把state里面的arr传递到子组件 </ComentList> </div> ) }}export default Comment; |
子组件ComentList.js:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
import React from "react"class ComentList extends React.Component { constructor(props) { super(props); } render() { return ( <div className="list"> <ul> { this.props.arr.map(item => { //这个地方通过this.props.arr接收到父组件传过来的arr，然后在{}里面进行js的循环 return ( <li key={item.userName}> {item.userName} 评论是:{item.text} </li> ) }) } </ul> </div> ) }}export default ComentList; |
父组件向子组件传值是比较容易的，我们来看一下效果：
好了，我们开始重头戏，
子组件向父组件传值，
同样是父组件：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
import React from "react"import ComentList from "./ComentList"class Comment extends React.Component { constructor(props) { super(props); this.state = { parentText: "this is parent text", arr: [{ "userName": "fangMing", "text": "123333", "result": true }, { "userName": "zhangSan", "text": "345555", "result": false }, { "userName": "liSi", "text": "567777", "result": true }, { "userName": "wangWu", "text": "789999", "result": true },] } } fn(data) { this.setState({ parentText: data //把父组件中的parentText替换为子组件传递的值 },() =>{ console.log(this.state.parentText);//setState是异步操作，但是我们可以在它的回调函数里面进行操作 }); } render() { return ( <div> //通过绑定事件进行值的运算，这个地方一定要记得.bind(this)， 不然会报错，切记切记，因为通过事件传递的时候this的指向已经改变 <ComentList arr={this.state.arr} pfn={this.fn.bind(this)}> </ComentList> <p> text is {this.state.parentText} </p> </div> ) }}export default Comment; |
子组件：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
import React from "react"class ComentList extends React.Component { constructor(props) { super(props); this.state = ({ childText: "this is child text" }) } clickFun(text) { this.props.pfn(text)//这个地方把值传递给了props的事件当中 } render() { return ( <div className="list"> <ul> { this.props.arr.map(item => { return ( <li key={item.userName}> {item.userName} 评论是:{item.text} </li> ) }) } </ul> //通过事件进行传值，如果想得到event，可以在参数最后加一个event， 这个地方还是要强调，this，this，this <button onClick={this.clickFun.bind(this, this.state.childText)}> click me </button> </div> ) }}export default ComentList; |
before：
after：
最后想说一点，如果嵌套的父子组件很深好几层，这个时候我想你应该考虑用状态管理工具redux了
以上是关于react父子组件之间传值的主要内容，如果未能解决你的问题，请参考以下文章