提示：以下是本篇文章正文内容，下面案例可供参考

一、父子组件通讯

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

子组件 ---->父组件 ：callback function
父组件提供回调函数，通过 props 传递给子组件
子组件调用 props 中的回调函数，函数可传参
父组件函数的参数就是子组件传递的数据

class Parent extends React.Component {state = {money: 10000,};// 回调函数buyPhone = (price) => {this.setState({money: this.state.money - price,});};render() {const { money } = this.state;return (<div><h1>父组件：{money}</h1><Child money={money} buyPhone={this.buyPhone} /></div>);}
}const Child = (props) => {const handleClick = () => {// 子组件调用父组件传递过来的回调函数props.buyPhone(5000);};return (<div><h3>子组件：{props.money}</h3><button onClick={handleClick}>买手机</button></div>);
};

二、兄弟组件通讯

关键：状态提升

兄弟组件之间的通信通常需要借助于它们的共同父组件。兄弟组件通过父组件共享状态或通过回调函数实现通信。

import React, { useState } from 'react';function BrotherA(props) {const handleClick = () => {props.onDataChange('BrotherA的数据');};return <button onClick={handleClick}>传递数据给BrotherB</button>;
}function BrotherB(props) {return <p>BrotherB接收到的数据: {props.data}</p>;
}function App() {const [data, setData] = useState('');const handleDataChange = (newData) => {setData(newData);};return (<div><BrotherA onDataChange={handleDataChange} /><BrotherB data={data} /></div>);
}export default App;

3、context 跨级组件通讯

跨组件通讯 - Context

1. 创建 Context 对象
2. 划定范围，提供共享数据
3. 范围内的组件，获取共享数据

创建了一个上下文 MyContext。
父组件 Parent 使用 MyContext.Provider 提供数据 data 和更新函数 setData。
子组件 Child 和孙组件 Grandchild 通过上下文共享父组件的数据和更新函数。
Grandchild 使用 useContext(MyContext) 获取上下文数据，并通过调用 setData 更新数据。

import React, { createContext, useContext, useState } from 'react';const MyContext = createContext();function Parent() {const [data, setData] = useState('初始数据');return (<MyContext.Provider value={{ data, setData }}><Child /></MyContext.Provider>);
}function Child() {return <Grandchild />;
}function Grandchild() {const { data, setData } = useContext(MyContext);const handleClick = () => {setData('更新后的数据');};return (<div><p>接收到的数据: {data}</p><button onClick={handleClick}>更新数据</button></div>);
}export default Parent;

参考链接：https://blog.csdn.net/lph159/article/details/140727173
https://blog.csdn.net/weixin_56370772/article/details/142316886