react中的父子组件通信

1、父组件获取子组件的数据及调用子组件的方法

step 1: 在父组件引入子组件，并通过ref获取子组件实例
例：<Header ref='childMethod'/>

step 2: 在父组件方法中通过refs获取子组件的方法或数据
例：
this.refs.childMethod.getchildMethod() / this.refs.childMethod.state.data;

父组件
import React , {Component} from 'react'
import Header from './header'

class Parents extends Component {
    constructor(props){
        super(props); 

        this.state = {
            name: '这是父组件'
        }
    }

    // 调用子组件的方法
    getChildMethod = ()=>{
        this.refs.childMethod.getchildMethod();
    }
    
    // 获取子组件的数据
    getChildData = ()=>{
        var res = this.refs.childMethod.state.childMsg;
        alert(res);
    }

    render () {
        return (
            <div className="parents">
                <Header  ref='childMethod'/>
                <button onClick={this.getChildMethod}>调用子组件方法</button>
                <button onClick={this.getChildData}>获取子组件的数据</button>
            </div>
        );
    }
}

export default Parents;

子组件
import React from 'react'

class Header extends React.Component{
    constructor (props) {
        super(props);

        this.state = {
			childMsg: 'this is child components!’
        }
    }

    getchildMethod = ()=> {
        alert('这是子组件方法getchildMethod');
    }

    render () {
        return (
            <div>
                <h2>这是头部组件</h2>
            </div>
        )
    }

}

export default Header

2、子组件获取父组件的数据及调用父组件的方法

父组件给子组件传值：
step 1: 父组件直接传值，例： <Header msg={this.state.name} />
step 2: 子组件获取值， 例：this.props.msg

子组件调用父组件方法：
step 1: 父组件中给子组件直接绑定方法，例： <Header run={this.funTwo}/>
step 2: 在子组件中调用该方法
例：<button onClick={this.props.run}>run</button>

子组件获取整个父组件实例：
step 1: 直接将整个父组件实例传到子组件，例： <Header parent={this}/>
step 2: 在子组件调用父组件实例中的方法并传值
例：<button onClick={this.props.parent.setName.bind(this, '你是猪')}>setName</button>
另一种方式
<button onClick={this.setNameChild}>sethomeName</button>
setNameChild = ()=>{ this.props.parent.setName(‘这是测试数据’);}

父组件
import React , {Component} from 'react'
import Header from './header'

class Parents extends Component {
    constructor(props){
        super(props); 

        this.state = {
            name: '这是父组件'
        }
    }
    
    funTwo = () => {
        alert('funTwo')
    }

    funThree () {
        alert('funThree')
    }
    
    setName = (str)=> {
        this.setState({
            name: str,
        })
    }

    render () {
        return (
            <div className="parents">
                <Header msg={this.state.name} run={this.funTwo} parent={this}/>
            </div>
        );
    }
}

export default Parents;

子组件
import React from 'react'

class Header extends React.Component{
    constructor (props) {
        super(props);
    }

    setNameChild = ()=>{
        this.props.parent.setName('这是测试数据');
    }
    
    render () {
        return (
            <div>
                <h2>这是头部组件</h2>
                {this.props.msg}
                <button onClick={this.props.run}>run</button>
                <button onClick={this.props.parent.setName.bind(this, '你是猪')}>setName</button>
                <button onClick={this.setNameChild}>sethomeName</button>
            </div>
        )
    }

}

export default Header

扩展知识：
defaultProps：可以在组件调用时给子组件设置默认值
propTypes：可以在子组件设置接收值的类型，例：array、bool、func、number、object、string、symbol

用法：

import PropTypes from 'prop-types'

class Child extends React.Component {
    render () {
    	return (
    		<div>
    			{this.props.title}
    		</div>
    	)
    }
}

// 如果父组件没有传title，则默认显示‘默认标题’
Child.defaultProps = {
    title: '默认标题'
}

// 设置来自父组件的title类型为字符串类型
Child.propTypes = {
    title: PropTypes.string
}
export default Child;