?? 如果還不了解 HTML 、 CSS和JS，可以參考本號下的 HTML21 天入門教程、 CSS 21 天入門教程和JS21天入門教程。
在前面的 組件通信之父子組件 中，講到了父子組件之間的通信是通過 props 實現的。
今天來說一下兄弟組件和跨級組件之間的通信方式。
什么是兄弟組件
如上圖，組件 A 和組件 B 就是兄弟組件，它們存在于同一個父組件中。
那么，它們是如何通信的呢？
兄弟組件之間的通信
兄弟組件之間無法直接通信，它們需要借助于父組件進行通信。
前面講父子組件之間通信的時候講了父到子和子到父兩種通信。
借助于這兩種通信就能實現兩步通信：子組件 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;
這樣在頁面上，顯示的內容如下：
?
使用狀態(tài)管理庫
除了上述使用 Context，React 里有很多狀態(tài)管理庫，比如 Redux。
它們通過把數據存儲在 store 中，同樣采用訂閱的方式通知更新。
這類組件適用于大型應用中復雜的狀態(tài)管理。這里暫時不舉示例代碼。
總結
最后來總結一下今天的內容要點：
- ?? 兄弟組件之間的通信通過父組件的 props 實現。
- ?? 跨級組件可以一級一級傳遞，但可以使用 Context 簡化操作。
- ?? 第三方狀態(tài)管理庫比如 Redux 提示了完善的狀態(tài)管理，適用于大型應用的狀態(tài)管理。
該文章在 2024/12/16 10:10:16 編輯過
400 186 1886
