(5)子组件向父组件通信

本节目标：理解“(5)子组件向父组件通信”的核心思路，并能把它用于实际开发或面试表达。

说明：原 OneNote 中有图片引用，但图片未包含在导出目录中；本页保留了可用的文字与代码内容。

父组件传递值为函数的 props 给子组件，子组件通过调用该函数向父组件通信。
事件冒泡：子组件触发一个事件，并带上数据，父组件捕获这个事件，在事件回调函数中获得数据。

演示代码：一、使用函数

props
// SubComponent.js

：

import React from "react";
const Sub = (props) => {
    const cb = (msg) => {
        return () => {
            props.callback(msg)
        }
    }
    return (
        <div>
            <button onClick={cb("

我们通信把

")}>

点击我

</button>
        </div>
    )
}
export default Sub;
// App.js

：

import React, { Component } from "react";
import Sub from "./SubComponent.js";
import "./App.css";
export default class App extends Component {
    callback(msg) {
        console.log(msg);
    }
    render() {
        return (
            <div>
                <Sub callback={this.callback.bind(this)} />
            </div>
        )
    }
}

二、事件冒泡事件冒泡并非 React 的概念，而是浏览器中 DOM 的事件机制。和回调函数类似，它也可以把数据从子组件发送到父组件。当你想在父组件中捕获来自子组件中的 DOM 事件时，可以采用此方法。

(5)子组件向父组件通信 ​

(5)子组件向父组件通信