react组件之间的通信

在React中，组件间的通信可以通过多种方式实现，以下是几种常见的方法：

1. 父组件向子组件通信：通过props传递数据。
2. 子组件向父组件通信：使用回调函数（callbacks）。
3. 兄弟组件通信：使用共享的上下文（Context）API，或者自定义事件系统。
4. 跨多个层级的组件通信：可以使用Context API或者中间组件。

以下是使用React Context API进行兄弟组件通信的例子：

首先，创建一个Context：

// Context.js
import React from 'react';
 
export const MessageContext = React.createContext();
 
// Provider组件
export const MessageProvider = ({ children }) => {
  const [message, setMessage] = React.useState('');
 
  return (
    <MessageContext.Provider value={{ message, setMessage }}>
      {children}
    </MessageContext.Provider>
  );
};

然后，在App组件中包裹所有兄弟组件：

// App.js
import React from 'react';
import { MessageProvider } from './Context';
 
const App = () => (
  <MessageProvider>
    <ComponentA />
    <ComponentB />
  </MessageProvider>
);

在兄弟组件中使用Context：

// ComponentA.js
import React, { useContext } from 'react';
import { MessageContext } from './Context';
 
const ComponentA = () => {
  const { setMessage } = useContext(MessageContext);
 
  return (
    <button onClick={() => setMessage('Hello from ComponentA!')}>
      Send Message
    </button>
  );
};

// ComponentB.js
import React, { useContext, useEffect } from 'react';
import { MessageContext } from './Context';
 
const ComponentB = () => {
  const { message } = useContext(MessageContext);
 
  useEffect(() => {
    console.log(message);
  }, [message]);
 
  return <div>{message}</div>;
};

这个例子中，ComponentA通过Context的setMessage函数发送消息，而ComponentB通过监听Context的message变化来接收消息。