react的ref通信

react的ref通信

import React, { Component,Fragment } from 'react'

class Father extends Component {
    nameChange = () => {
        console.log( this )
        // this.refs.son.setState({
        // name: '骏小小'
        // })
        this.son.setState({
            name: '骏小小'
        })
    }
    render () {
        return (
        <Fragment>
            <h3> father组件 </h3>
            <button onClick = { this.nameChange }> name-change </button>
            
            // ref通信有两种方式，一种是 ref= " 字符串 " ，一种是等于一个函数
            {/* <Son ref = "son"></Son> */}
            
            <Son ref = { el => this.son = el }> </Son>//el就是当前组件本身，也就是Son
            
        </Fragment>
        )
    }
}
class Son extends Component {
    constructor () {
        super()
        this.state = {
            name: '小骏骏'
        }
    }
    render () {
        let { name } = this.state
        return (
            <Fragment>
                <h4> son组件 </h4>
                <p> 父亲给我起了个名字：{ name } </p>
            </Fragment>
        )
    }
}
export default Father