💡 如果还不了解 HTML 、 CSS和JS，可以参考本号下的 HTML21 天入门教程、 CSS 21 天入门教程和JS21天入门教程。

在前面的 组件通信之父子组件 中，讲到了父子组件之间的通信是通过 props 实现的。

今天来说一下兄弟组件和跨级组件之间的通信方式。

什么是兄弟组件

那么，它们是如何通信的呢？

兄弟组件之间的通信

兄弟组件之间无法直接通信，它们需要借助于父组件进行通信。

前面讲父子组件之间通信的时候讲了父到子和子到父两种通信。

借助于这两种通信就能实现两步通信：子组件 A 到父组件，父组件到子组件 B。

前面实现了 SayHello 组件传递消息到父组件，现在来实现另一个组件 SayHelloMsg 。

import React from 'react';  function SayHelloMsg(props) {   return (     <div>       <p>SayHelloMsg子组件</p>       {props.message}       <hr />     </div>   ); }  export default SayHelloMsg; 

这个组件非常简单，就是接收到自父组件的 message 并显示。

在父组件中，import 这个组件，然后修改之前的显示。

import './App.css'; import SayHello from './SayHello'; import { useState } from 'react'; import SayHelloMsg from './SayHelloMsg';  function App() {   const [msg, setMsg] = useState('');    const handleChildMessage = (message) => {     setMsg(message);     console.log('Received message from child:', message);   };   return (     <div>       {/* <div>{msg}</div> */}       <SayHelloMsg message={msg} />       <SayHello name="World" onMessage={handleChildMessage} />     </div>   ); }  export default App; 

这样修改完之后效果如下：

什么是跨级组件

如下图所示，父组件与组件 A1 就属于跨级组件，他们中间了一层组件 A。

跨级组件通信

按前面讲过的如果想要父组件与组件 A1 之间实现通信，通过 props 一级一级传递是可以实现的。

但这样有点儿麻烦是不是，有没有更好的方法呢？

有。

实现它的基本原理是一样的，就是把数据放在某个地方存起来，组件都能访问到。

使用 React Context API

React Context 类似于 Session，如果你熟悉的话。

不同的是它提供了订阅机制，只要有更新，订阅了它的组件都会收到通知。

先定义 MyContext 组件，它会被组件和组件 A1 用到。

import React from 'react';  export const MyContext = React.createContext(); 

定义组件 A1，这里是 SayHelloContainerMsg 。

import React, { useContext } from 'react'; import { MyContext } from './MyContext';  function SayHelloContainerMsg() {   const helloMsg = useContext(MyContext);   return (     <div>       <p>Testing info: </p> {helloMsg} <hr />     </div>   ); }  export default SayHelloContainerMsg; 

通过导入 MyContext 获取里面的值 helloMsg 。这个值是父组件放进去的。

再定义组件 SayHelloContainer，它就是这里的组件 A，只是一个壳，用来显示 SayHelloContainerMsg 。

import SayHelloContainerMsg from './SayHelloContainerMsg';  function SayHelloContainer() {   return (     <div>       <SayHelloContainerMsg />     </div>   ); }  export default SayHelloContainer; 

最后看在父组件里的调用。

它同样导入了 MyContext，然后通过 Provider 传入 value 值 。

import SayHelloContainer from './SayHelloContainer'; import { MyContext } from './MyContext';  function App() {   const helloMsg = 'Hello From App';   return (     <MyContext.Provider value={helloMsg}>       <SayHelloContainer />     </MyContext.Provider>   ); }  export default App; 

这样在页面上，显示的内容如下：

​

使用状态管理库

除了上述使用 Context，React 里有很多状态管理库，比如 Redux。

它们通过把数据存储在 store 中，同样采用订阅的方式通知更新。

这类组件适用于大型应用中复杂的状态管理。这里暂时不举示例代码。

总结

最后来总结一下今天的内容要点：

• 🍑 兄弟组件之间的通信通过父组件的 props 实现。
• 🍑 跨级组件可以一级一级传递，但可以使用 Context 简化操作。
• 🍑 第三方状态管理库比如 Redux 提示了完善的状态管理，适用于大型应用的状态管理。