react组件通信-父子组件通信

父组件给子组件传值

class Parent extends React.Component {
    // 第一步：提供传给子组件的数据
    state = {
        msg: ''
    }
    getMsg = (data) => {
        this.setState({
            msg: data
        })
    }
    render() {
        return (
            <div className="parentBox">
                父组件：
                //第二步：给子组件标签添加属性，值为state中数据
                <Child name={this.state.msg}></Child>
            </div>
        )
    }
}
export default Parent

class Child extends React.Component {
    render() {
        return (
            <div className="childBox">
                // 第三步：子组件通过props接送父组件传递的数据
                <span>
                    接受来自父组件的值: {this.props.name}
                </span>
                <br/>
            </div>
        )
    }
}
export default Child

子组件给父组件传值

class Parent extends React.Component {
    // 提供传给子组件的数据
    state = {
        msg: ''
    }
    // 第一步：父组件提供一个回调函数，用来接受子组件传来的值
    getChildMsg = (data) => {
        this.setState({
            msg: data
        })
    }
    render() {
        return (
            <div className="parentBox">
                子组件的值：{this.state.msg}
                // 第二步：将该函数作为属性值传给子组件
                <Child name={this.state.msg} getMsg={this.getChildMsg}></Child>
            </div>
        )
    }
}
export default Parent

class Child extends React.Component {
    state = {
        childVal: '儿子的值'
    }
    // 第三步：子组件通过props调用回调函数将子组件的值传给回调函数
    handleMsg = () => {
        this.props.getChildMsg(this.state.childVal)
    }
    render() {
        return (
            <div className="childBox">
                <span>
                    接受来自父组件的值: {this.props.name}
                </span>
                <br/>
                <button onClick={this.handleMsg}>点击给父组件传值</button>
            </div>
        )
    }
}
export default Child

总结：子组件传值给父组件的思路就是利用回调函数，父组件提供回调函数，子组件调用，将要传给父组件的数据作为参数传给回调函数