React组件通信：如何优雅地实现组件间的数据传递

在React中，组件间通信可以通过以下方法实现：

1. 父组件向子组件通信：通过props传递数据。
2. 子组件向父组件通信：使用回调函数（callbacks）。
3. 兄弟组件通信：使用上下文（Context）或状态管理库（如Redux）。
4. 跨多个层级的组件通信：同样可以使用上下文或状态管理库。

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

// 创建一个Context
const MessageContext = React.createContext();
 
// 子组件A，发送数据
const ComponentA = () => {
  const message = { text: 'Hello from Component A!' };
  return (
    <MessageContext.Provider value={message}>
      <ComponentB />
    </MessageContext.Provider>
  );
};
 
// 兄弟组件B，接收数据
const ComponentB = () => {
  const message = React.useContext(MessageContext);
  return <div>{message ? message.text : 'No message received.'}</div>;
};
 
// 使用ComponentA作为根组件
ReactDOM.render(<ComponentA />, document.getElementById('root'));

在这个例子中，ComponentA 使用 <MessageContext.Provider> 包裹 ComponentB 并传递了一个消息对象。ComponentB 通过 React.useContext 钩子函数获取到了这个消息对象，并将其显示出来。这是一个简单的兄弟组件通信的例子。