React 中如何实现子组件向父组件同等级组件传值

在 React 开发中，组件间的通信是一项关键技能。我们都知道，父组件向子组件传值相对简单，通过属性传递即可。然而，子组件向父组件以及同等级组件传值则需要一些特定的技巧。

子组件向父组件传值

子组件向父组件传值的常用方法是利用回调函数。在父组件中定义一个函数，这个函数将接收子组件传递过来的值。然后，将这个函数作为一个属性传递给子组件。在子组件中，当需要向父组件传值时，调用这个从父组件传递过来的函数，并将需要传递的值作为参数传入。

例如，父组件中定义 handleChildData 函数：

import React, { useState } from'react';
function ParentComponent() {
    const [dataFromChild, setDataFromChild] = useState('');
    const handleChildData = (data) => {
        setDataFromChild(data);
    };
    return (
        <div>
            <ChildComponent onData={handleChildData} />
            <p>来自子组件的数据: {dataFromChild}</p>
        </div>
    );
}
function ChildComponent({ onData }) {
    const sendDataToParent = () => {
        const data = '这是子组件传递的数据';
        onData(data);
    };
    return (
        <button onClick={sendDataToParent}>
            向父组件传值
        </button>
    );
}
export default ParentComponent;

子组件向同等级组件传值

实现子组件向同等级组件传值，通常借助于共同的父组件作为桥梁。先由子组件将值传递给共同的父组件，再由父组件将这个值传递给目标同等级组件。

假设我们有 ComponentA 和 ComponentB 两个同等级组件，它们有一个共同的父组件 Parent。在 ComponentA 中，按照子组件向父组件传值的方式将数据传递给 Parent。然后在 Parent 组件中，将接收到的数据通过属性传递给 ComponentB。

import React, { useState } from'react';
function Parent() {
    const [sharedData, setSharedData] = useState('');
    const handleDataFromA = (data) => {
        setSharedData(data);
    };
    return (
        <div>
            <ComponentA onData={handleDataFromA} />
            <ComponentB data={sharedData} />
        </div>
    );
}
function ComponentA({ onData }) {
    const sendData = () => {
        const data = '来自 ComponentA 的数据';
        onData(data);
    };
    return (
        <button onClick={sendData}>
            向同等级组件传值
        </button>
    );
}
function ComponentB({ data }) {
    return (
        <p>接收到的数据: {data}</p>
    );
}
export default Parent;

通过这些方法，我们能够在 React 应用中灵活地实现子组件向父组件以及同等级组件的传值，为构建复杂的交互界面提供有力支持。