React中的跨組件通信的幾種常見方法

更新時間：2025年04月09日 10:28:32 作者：YiHanXii

在React中,跨組件通信有幾種常見的方式,每種方式適用于不同的場景,下面是幾種常見的跨組件通信方法,感興趣的朋友一起看看吧

1. 通過父子組件傳遞 Props

父組件可以通過 props 將數(shù)據(jù)傳遞給子組件，子組件只能接收和使用這些數(shù)據(jù)。

父組件（Parent.js）：

import React from 'react';
import Child from './Child';
const Parent = () => {
  const message = 'Hello from Parent!';
  return <Child msg={message} />;
};
export default Parent;

子組件（Child.js）：

import React from 'react';
const Child = (props) => {
  return <div>{props.msg}</div>;
};
export default Child;

優(yōu)點：

簡單易用，適合父子組件之間的通信。
父組件控制數(shù)據(jù)流。

2. 通過回調(diào)函數(shù)實現(xiàn)父子組件通信

父組件可以將一個函數(shù)作為 props 傳遞給子組件，子組件通過調(diào)用這個函數(shù)來向父組件傳遞數(shù)據(jù)。

父組件（Parent.js）：

import React, { useState } from 'react';
import Child from './Child';
const Parent = () => {
  const [message, setMessage] = useState('');
  const handleMessage = (msg) => {
    setMessage(msg);
  };
  return (
    <div>
      <Child onMessage={handleMessage} />
      <p>{message}</p>
    </div>
  );
};
export default Parent;

子組件（Child.js）：

import React from 'react';
const Child = ({ onMessage }) => {
  return (
    <button onClick={() => onMessage('Hello from Child!')}>Send Message</button>
  );
};
export default Child;

優(yōu)點：

適用于父子組件之間的雙向通信。

3. 使用 Context API

當多個組件需要共享某些數(shù)據(jù)時，可以使用 React Context 來避免逐層傳遞 props。Context 使得父組件可以通過提供者 (Provider) 共享數(shù)據(jù)，任何子組件都可以通過消費者 (Consumer) 或 useContext Hook 來獲取這些數(shù)據(jù)。

創(chuàng)建一個 Context：

import React, { createContext, useState, useContext } from 'react';
const MessageContext = createContext();
const Parent = () => {
  const [message, setMessage] = useState('Hello from Parent via Context!');
  return (
    <MessageContext.Provider value={message}>
      <Child />
    </MessageContext.Provider>
  );
};
const Child = () => {
  const message = useContext(MessageContext);
  return <p>{message}</p>;
};
export default Parent;

優(yōu)點：

適合跨越多層組件共享狀態(tài)，避免層層傳遞 props。
可以動態(tài)更新值，且所有消費者會自動重新渲染。

4. 通過 EventEmitter

如果你需要在不相關(guān)的組件之間進行通信（比如，兄弟組件之間），可以使用事件發(fā)射器（EventEmitter）。這種方法需要一些外部庫，通常使用 EventEmitter 或類似的庫來發(fā)布和訂閱事件。

例如，你可以使用 mitt 或 EventEmitter3 來實現(xiàn)。

安裝 mitt：

npm install mitt

使用 mitt：

import React, { useEffect, useState } from 'react';
import mitt from 'mitt';
const emitter = mitt();
const ComponentA = () => {
  const handleClick = () => {
    emitter.emit('message', 'Message from Component A');
  };
  return <button onClick={handleClick}>Send Message</button>;
};
const ComponentB = () => {
  const [message, setMessage] = useState('');
  useEffect(() => {
    const handleMessage = (msg) => setMessage(msg);
    emitter.on('message', handleMessage);
    return () => {
      emitter.off('message', handleMessage);
    };
  }, []);
  return <p>{message}</p>;
};
const App = () => (
  <div>
    <ComponentA />
    <ComponentB />
  </div>
);
export default App;

優(yōu)點：