使用react进行父子组件传值

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

父传子：

　　父组件：自定义名

<ChildCom content={'我是父级过来的内容'}/>

　　子组件：使用this.props.自定义的名字接收

 <div>{this.props.content}</div>

子传父：

　　子组件：事件传递  记着加bind（this）

import React from 'react'
class ChildCom extends React.Component {
 valueToParent(value) {
 　　this.props.onValue(value);
 }
 render() {
 return (
 <div>
 <h2>子组件</h2>
 <div>
 　　<a onClick={this.valueToParent.bind(this,123)}>向父组件传值123</a>
 </div>
 </div>
 )
 }
}
export default ChildCom;

　　父组件：

import React from 'react'
import ChildCom from './childCom.js'
class ParentCom extends React.Component {
 state = {
     getChildValue: ''
 }
 getChildValue(value) {
     this.setState({
         getChildValue: value
     })
 }
 render() {
 return (
 <div>
 　 　<h1>父组件</h1>
 　　 <div>子组件过来的值为：{this.state.getChildValue}</div>
     <ChildCom onValue={this.getChildValue.bind(this)}/>
 </div>
 )
 }
}
export default ParentCom;        

 

下面是详细的传值可以再看一次：

 

父组件向子组件传值：

父组件Comment.js:

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:

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;

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

好了，我们开始重头戏，

子组件向父组件传值，

同样是父组件：

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;       

子组件：

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了