学习目标

组件通讯介绍以及为什么要有组件通讯
组件的props
组件通讯的三种方式父传子子传父兄弟组件
Context组件通讯
props深入

组件通讯

组件是独立且封闭的单元，默认情况下，只能使用组件自己的数据。在组件化过程中，我们将一个完整的功能拆分成多个组件，以更好的完成整个应用的功能。而在这个过程中，多个组件之间不可避免的要共享某些数据。为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通。这个过程就是组件通讯。

props

组件是封闭的，要接收外部数据应该通过props来实现
props的作用：接收传递给组件的数据
传递数据：给组件标签添加属性
接收数据：函数组件通过参数props接收数据，类组件通过this.props接收数据

函数组件通讯

子组件

function Hello(props) {
    console.log(props)
    return (
        <div>接收到数据：{props.name}</div>
    )
}

父组件

<Hello name="jack" age={19} />

类组件通讯

子组件

class Hello extends React.Component {
    render() {
        return (
            <div>接收到的数据：{this.props.age}</div>
        )
    }
}

父组件

<Hello name="jack" age={19} />

props的特点

可以给组件传递任意类型的数据
props是只读的，不允许修改props的数据
注意：在类组件中使用的时候，需要把props传递给super() ，否则构造函数无法获取到props

class Hello extends React.Component {
    constructor(props) {
        // 推荐将props传递给父类构造函数
        super(props)
    }
    render() {
        return <div>接收到的数据：{this.props.age}</div>
    }
}

组件通讯三种方式

父传子
子传父
非父子

父传子

父组件提供要传递的state数据
给子组件标签添加属性，值为 state 中的数据
子组件中通过 props 接收父组件中传递的数据

父组件提供数据并且传递给子组件

class Parent extends React.Component {
    state = { lastName: '王' }
    render() {
        return (
            <div>
                传递数据给子组件：<Child name={this.state.lastName} />
            </div>
        )
    }
}

子组件接收数据

function Child(props) {
    return <div>子组件接收到数据：{props.name}</div>
}

评论列表案例

子传父

思路：利用回调函数，父组件提供回调，子组件调用，将要传递的数据作为回调函数的参数。

父组件提供一个回调函数（用于接收数据）
将该函数作为属性的值，传递给子组件
子组件通过 props 调用回调函数
将子组件的数据作为参数传递给回调函数

父组件提供函数并且传递给字符串

class Parent extends React.Component {
    getChildMsg = (msg) => {
        console.log('接收到子组件数据', msg)
    }
    render() {
        return (
            <div>
                子组件：<Child getMsg={this.getChildMsg} />
            </div>
        )
    }
}

子组件接收函数并且调用

class Child extends React.Component {
    state = { childMsg: 'React' }
    handleClick = () => {
        this.props.getMsg(this.state.childMsg)
    }
    return (
        <button onClick={this.handleClick}>点我，给父组件传递数据</button>
    )
}

注意：回调函数中 this 指向问题！

React 学习笔记 组件通讯