当前位置：首页 > React

react中同级组件如何传值

2026-01-26 00:59:20React

同级组件传值方法

在React中，同级组件之间传值通常需要通过共同的父组件作为中介。以下是几种常见的实现方式：

状态提升（Lifting State Up）

将共享状态提升到最近的共同父组件中，通过props向下传递数据和方法。

react中同级组件如何传值

function Parent() {
  const [sharedState, setSharedState] = useState('');

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

function ChildA({ sharedState, onStateChange }) {
  return (
    <input 
      value={sharedState}
      onChange={(e) => onStateChange(e.target.value)}
    />
  );
}

function ChildB({ sharedState }) {
  return <div>{sharedState}</div>;
}

使用Context API

当组件层级较深时，可以使用Context避免prop drilling。

react中同级组件如何传值

const SharedContext = createContext();

function Parent() {
  const [sharedState, setSharedState] = useState('');

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

function ChildA() {
  const { setSharedState } = useContext(SharedContext);

  return (
    <input onChange={(e) => setSharedState(e.target.value)} />
  );
}

function ChildB() {
  const { sharedState } = useContext(SharedContext);
  return <div>{sharedState}</div>;
}

使用状态管理库

对于复杂应用，可以使用Redux、MobX或Zustand等状态管理库。

// 使用Zustand示例
const useStore = create(set => ({
  sharedState: '',
  setSharedState: (value) => set({ sharedState: value })
}));

function ChildA() {
  const setSharedState = useStore(state => state.setSharedState);

  return (
    <input onChange={(e) => setSharedState(e.target.value)} />
  );
}

function ChildB() {
  const sharedState = useStore(state => state.sharedState);
  return <div>{sharedState}</div>;
}

使用事件总线

通过自定义事件系统实现组件通信（较少推荐）。

const eventBus = {
  listeners: {},
  emit(event, data) {
    if (this.listeners[event]) {
      this.listeners[event].forEach(cb => cb(data));
    }
  },
  on(event, callback) {
    if (!this.listeners[event]) {
      this.listeners[event] = [];
    }
    this.listeners[event].push(callback);
  }
};

function ChildA() {
  return (
    <input onChange={(e) => eventBus.emit('stateChange', e.target.value)} />
  );
}

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

  useEffect(() => {
    eventBus.on('stateChange', setValue);
    return () => eventBus.off('stateChange', setValue);
  }, []);

  return <div>{value}</div>;
}