react兄弟组件之间的通讯

### React 组件间的通信方法 React 的核心设计理念之一是单向数据流，即数据从父组件流向子组件，主要通过 `props` 实现[^4]。然而，在实际开发中，除了父子组件之间的通信外，还可能涉及兄弟组件以及跨层级的复杂通信场景。以下是几种常见的 React 组件间通信方式及其具体实现： #### 1. **父组件到子组件** 父组件可以通过 `props` 将数据传递给子组件。这是最基础也是最常见的通信方式。 ```javascript class Parent extends React.Component { constructor(props) { super(props); this.state = { message: "Hello from parent!" }; } render() { return ( <Child msg={this.state.message} /> ); } } function Child({ msg }) { return <p>{msg}</p>; } ``` 另一种方式是利用 `ref` 来直接访问子组件实例并调用其方法。这种方法适用于某些特定场景下的功能需求[^1]。 ```javascript class Child extends React.Component { myFunc() { console.log("Function called!"); } } class Parent extends React.Component { componentDidMount() { this.childRef.myFunc(); } render() { return <Child ref={(child) => (this.childRef = child)} />; } } ``` --- #### 2. **子组件到父组件** 子组件可以借助回调函数将事件或状态更新通知给父组件。这种模式通常用于表单提交或其他交互操作。 ```javascript class Parent extends React.Component { handleCallback(dataFromChild) { console.log(`Data received from child: ${dataFromChild}`); } render() { return <Child onMessage={this.handleCallback.bind(this)} />; } } class Child extends React.Component { sendMessageToParent() { const data = "Hello, Parent!"; this.props.onMessage(data); // 调用父组件传入的回调函数 } render() { return <button onClick={() => this.sendMessageToParent()}>Send Message</button>; } } ``` --- #### 3. **兄弟组件之间** 由于 React 不支持直接的兄弟组件通信，因此需要引入一个共同的祖先作为中介来进行协调。这通常是通过提升状态至最近公共祖先来完成的。 ```javascript class Ancestor extends React.Component { state = { sharedValue: "" }; updateSharedValue(value) { this.setState({ sharedValue: value }); } render() { return ( <> <SiblingA onUpdate={this.updateSharedValue.bind(this)} /> <SiblingB sharedValue={this.state.sharedValue} /> </> ); } } class SiblingA extends React.Component { handleChange(e) { this.props.onUpdate(e.target.value); } render() { return <input type="text" onChange={this.handleChange.bind(this)} />; } } class SiblingB extends React.Component { render() { return <p>Received Value: {this.props.sharedValue}</p>; } } ``` --- #### 4. **跨层级组件通信 - Context API** 当面临多层嵌套组件时，频繁地逐层传递 `props` 可能会变得繁琐甚至不可维护。此时可采用 React 提供的 `Context API` 进行全局状态管理][^[^23]。 定义上下文： ```javascript const MyContext = React.createContext(); // Provider 组件提供共享的数据 class AppProvider extends React.Component { state = { globalState: "Global Data" }; changeGlobalState(newState) { this.setState({ globalState: newState }); } render() { return ( <MyContext.Provider value={{ ...this.state, changeGlobalState: this.changeGlobalState.bind(this), }} > {this.props.children} </MyContext.Provider> ); } } ``` 消费上下文： ```javascript class ConsumerComponent extends React.Component { static contextType = MyContext; render() { const { globalState, changeGlobalState } = this.context; return ( <div> <p>{globalState}</p> <button onClick={() => changeGlobalState("Updated Global Data")}> Update State </button> </div> ); } } ReactDOM.render( <AppProvider> <ConsumerComponent /> </AppProvider>, document.getElementById('root') ); ``` --- #### 总结 以上介绍了四种主流的 React 组件间通信方式： - 使用 `props` 和回调函数处理简单的父子关系； - 利用 `ref` 访问子组件实例； - 借助公共祖先把状态提升以解决兄弟组件通信问题； - 应用 `Context API` 解决深层次嵌套组件的状态共享难题。 每种方式都有适用范围和局限性，开发者应根据实际情况灵活选用合适的策略。