React 父子组件通信的几种方法

在 React 中，父子组件的通信是常见的问题，除了使用状态管理工具（如redux）以外，也可以实现父子组件的相互通信。

其中，父组件可以通过props、原型方法向子组件通信，子组件可以通过回调函数、事件冒泡向父组件通信。

1. 父组件向子组件通信

1. props

如下代码，name作为props由父组件传递给子组件，子组件拿到name后，渲染在页面上。

参数name由父组件传递给了子组件。

import { useState } from 'react';

const Son = ({ name }) => {
    return <div>{name}</div>;
};

const Father = () => {
    const [name, setName] = useState('Jack');
    return (
        <>
            <Son name={name} />
        </>
    );
};

export default Father;

2. 原型方法

父组件通过React.createRef()创建Ref，保存在实例属性myRef上。父组件中，渲染子组件时，定义一个Ref属性，值为刚创建的myRef。

父组件调用子组件的myFunc函数，传递一个参数，子组件接收到参数，打印出参数。

参数从父组件传递给子组件，完成了父组件向子组件通信。

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

class Son extends Component {
    myFunc(name) {
        console.log(name);
    }
    render() {
        return <></>;
    }
}

// 父组件
export default class Father extends Component {
    constructor(props) {
        super(props);
        // 创建Ref，并保存在实例属性myRef上
        this.myRef = React.createRef();
    }

    componentDidMount() {
        // 调用子组件的函数，传递一个参数
        this.myRef.current.myFunc('Jack');
    }
    render() {
        return (
            <>
                <Son ref={this.myRef} />
            </>
        );
    }
}

2. 子组件向父组件通信

1. 回调函数

如下代码所示，父组件显示当前计数值，但不通过父组件本身修改这个值。父组件给子组件传递一个函数，子组件点击按钮时，调用这个函数，实现计数值加一。

在子组件内部，修改了父组件中的值，从而完成了子组件向父组件通信。

import { useState } from 'react';

const Son = ({ setCount }) => {
    return <button onClick={() => setCount(count => count + 1)}>点击+1</button>;
};

const Father = () => {
    const [count, setCount] = useState(0);
    return (
        <>
            <div>计数值：{count}</div>
            <Son setCount={setCount} />
        </>
    );
};

export default Father;

2. 事件冒泡

如下代码，利用了事件冒泡机制，点击子组件的button按钮，事件会冒泡到父组件身上，触发父组件的onClick函数，打印出Jack。

点击的是子组件，父组件执行函数，完成了子组件向父组件通信。

const Son = () => {
    return <button>点击</button>;
};

const Father = () => {
    const sayName = name => {
        console.log(name);
    };
    return (
        <div onClick={() => sayName('Jack')}>
            <Son />
        </div>
    );
};

export default Father;

---

📘📘欢迎在我的博客上访问：
https://lzxjack.top/