当前位置：首页 > React

react兄弟组件之间如何通信

2026-01-25 00:21:07React

兄弟组件通信方法

在React中，兄弟组件之间无法直接通信，需要通过共同的父组件作为中介。以下是几种常见方法：

使用状态提升（Lifting State Up） 将共享状态提升到最近的共同父组件中，通过props传递给子组件。父组件管理状态，子组件通过回调函数修改状态。

// 父组件
function Parent() {
  const [sharedState, setSharedState] = useState('');

  return (
    <>
      <ChildA state={sharedState} />
      <ChildB onStateChange={setSharedState} />
    </>
  );
}

使用Context API 创建Context提供共享状态，兄弟组件通过useContext hook或Consumer访问数据。

const SharedContext = createContext();

function Parent() {
  const [value, setValue] = useState('');

  return (
    <SharedContext.Provider value={{ value, setValue }}>
      <ChildA />
      <ChildB />
    </SharedContext.Provider>
  );
}

function ChildA() {
  const { value } = useContext(SharedContext);
  return <div>{value}</div>;
}

function ChildB() {
  const { setValue } = useContext(SharedContext);
  return <button onClick={() => setValue('new')}>Update</button>;
}

使用状态管理库（Redux/MobX） 对于复杂应用，可使用Redux等库集中管理状态。组件通过dispatch actions和selector访问store。

// 使用Redux Toolkit示例
const store = configureStore({ reducer: counterReducer });

function Parent() {
  return (
    <Provider store={store}>
      <ChildA />
      <ChildB />
    </Provider>
  );
}

function ChildA() {
  const count = useSelector(state => state.value);
  return <div>{count}</div>;
}

function ChildB() {
  const dispatch = useDispatch();
  return <button onClick={() => dispatch(increment())}>+</button>;
}

使用自定义事件（Event Emitter） 通过事件总线实现发布-订阅模式，适合解耦组件。

const emitter = new EventEmitter();

function ChildA() {
  const [msg, setMsg] = useState('');
  useEffect(() => {
    emitter.on('event', setMsg);
    return () => emitter.off('event', setMsg);
  }, []);
  return <div>{msg}</div>;
}

function ChildB() {
  return (
    <button onClick={() => emitter.emit('event', 'Hello')}>
      Send
    </button>
  );
}

使用Refs转发 通过父组件转发ref，允许兄弟组件直接调用对方方法（慎用，通常不推荐）。

const ChildA = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    method: () => console.log('Called')
  }));
  return <div>ChildA</div>;
});

function Parent() {
  const childARef = useRef();

  return (
    <>
      <ChildA ref={childARef} />
      <ChildB onAction={() => childARef.current.method()} />
    </>
  );
}

选择方法时应考虑组件层级深度、通信频率和项目复杂度。简单场景推荐状态提升或Context，大型应用适合状态管理库。

react兄弟组件之间如何通信