React 父子组件通信

父子组件通信分为【父组件给子组件传值】、【父组件获取子组件的值】两类。

一.父组件给子组件传值3种方式

1.父组件给子组件传递数据

父组件Parent引入子组件Children，并把title传递给子组件

import React from 'react';
import Children from './Children';
class Parent extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            title: '我是父组件title'
        }
    }
    render(){
        return (
            <div>
                <Children title={this.state.title}/>
                <div>我是父组件内容</div>
            </div>
        )
    }
}

子组件根据props获取父组件传过来的数据

import React from 'react';
class Children extends React.Component {
    constructor(props){
        super(props);
    }
    render(){
        return (
            <header>
                <h2>{this.props.title}</h2>
            </header>
        )
    }
}

2.父组件给子组件传递方法

父组件把clearMsg方法传递给子组件

import React from 'react';
import Children from './Children';
class Parent extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            msg: '我是消息'
        }
    }
    clearMsg = () => {
        //清空消息
        this.setState({ msg: '' });
    }
    render(){
        return (
            <div>
                <Children  clearMsg={this.clearMsg}>
                <div>我是父组件内容</div>
                <p>{this.state.msg}</p>
            </div>
        )
    }
}

子组件根据props获取父组件传过来的方法clearMsg，并在点击按钮的时候执行了父组件清空msg的方法

import React from 'react';
class Children extends React.Component {
    constructor(props){
        super(props);
    }
    render(){
        return (
            <header>
                <button onClick={this.props.clearMsg}>清空父组件msg</button>
            </header>
        )
    }
}

3.父组件给子组件传递整个父组件

父组件把this传递给子组件

import React from 'react';
import Children from './Children';
class Parent extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            title: '我是首页',
            msg: '我是消息'
        }
    }
    clearMsg = () => {
        //清空消息
        this.setState({ msg: '' });
    }
    render(){
        return (
            <div>
                <Children  parent={this}>
                <div>我是父组件内容</div>
                <p>{this.state.msg}</p>
            </div>
        )
    }
}

子组件根据props获取父组件传过来的父组件，并在点击按钮的时候获取了父组件的数据和执行了父组件清空msg的方法

import React from 'react';
class Children extends React.Component {
    constructor(props){
        super(props);
    }
    getParent = () => {
        //这是父组件
        let parent = this.props.parent;
        //打印父组件的title值
        console.log(parent.state.title);
        //执行父组件的方法
        parent.clearMsg();
    }
    render(){
        return (
            <header>
                <button onClick={this.getParent}>获取父组件本身</button>
            </header>
        )
    }
}

二.父组件获取子组件值2种方式

1.子组件自发向父组件传值

父组件方法打印出子组件的msg

import React from 'react';
import Children from './Children';
class Parent extends React.Component {
    constructor(props){
        super(props);
    }
    sentMsg = (msg) => {
        console.log(msg);//打印出  我是子组件mgs
    }
    render(){
        return (
            <div>
                <Children sentMsg={this.sentMsg} />
            </div>
        )
    }
}

子组件把msg传递给父组件的方法

import React from 'react';
class Children extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            msg: '我是子组件mgs'
        }
    }
    render(){
        return (
            <header>
                <button onClick={() => this.props.sentMsg(this.state.msg)}>给父组件传值</button>
            </header>
        )
    }
}

2.父组件获取整个子组件

父组件根据ref获取整个子组件，并获取到组件的所有数据和方法。
这里注意父组件用了React生命周期中componentDidMount方法，该方法是在页面渲染完成之后执行的方法。

import React from 'react';
import Children from './Children';
class Parent extends React.Component {
    constructor(props){
        super(props);
    }
    componentDidMount(){
        //这是子组件
        let headerComponet = this.refs.headerComponet;
        //获取子组件数据
        console.log(headerComponet.state.msg); //打印出  我是子组件mgs
        //执行子组件方法
        headerComponet.showMsg();//打印出  我是子组件mgs
    }
    render(){
        return (
            <div>
                <Children ref="headerComponet" />
            </div>
        )
    }
}

------------更新start---------------
请注意： this.refs这种方法已被废弃，如果你项目中还这么用，请尽快更改他，最新的用法如下：
参考链接： https://reactjs.org/docs/refs-and-the-dom.html

import React from 'react';
import Children from './Children';
class Parent extends React.Component {
    constructor(props){
        super(props);
        this.children = React.createRef(); //创建ref
    }
    componentDidMount(){
        //这是子组件
        let headerComponet = this.children.current; //调用ref
        //获取子组件数据
        console.log(headerComponet.state.msg); //打印出  我是子组件mgs
        //执行子组件方法
        headerComponet.showMsg();//打印出  我是子组件mgs
    }
    render(){
        return (
            <div>
                <Children ref={this.children} />
            </div>
        )
    }
}

------------更新end---------------
子组件把msg传递给父组件的方法

import React from 'react';
class Children extends React.Component {
   constructor(props){
        super(props);
        this.state = {
            msg: '我是子组件mgs'
        }
    }
    showMsg = () => {
        console.log(this.state.msg);
    }
    render(){
        return (<header></header>)
    }
}

tips: 简书上交流可能会看不到消息，如有问题，欢迎进群交流50063010

END---------------