当前位置：首页 > React

react兄弟组件之间如何传值

2026-01-25 16:27:55React

兄弟组件传值方法

在React中，兄弟组件之间传值可以通过以下几种常见方式实现：

状态提升（Lifting State Up）

将共享状态提升到最近的共同父组件中，通过props传递给兄弟组件。父组件管理状态，子组件通过回调函数更新状态。

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

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

// 子组件A
function ChildA({ value, onChange }) {
  return <input value={value} onChange={(e) => onChange(e.target.value)} />;
}

// 子组件B
function ChildB({ value }) {
  return <div>{value}</div>;
}

使用Context API

当组件层级较深时，可以使用Context避免props逐层传递。

const MyContext = createContext();

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

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

function ChildA() {
  const { setValue } = useContext(MyContext);
  return <input onChange={(e) => setValue(e.target.value)} />;
}

function ChildB() {
  const { value } = useContext(MyContext);
  return <div>{value}</div>;
}

使用状态管理库

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

// 使用Zustand示例
import create from 'zustand';

const useStore = create((set) => ({
  value: '',
  setValue: (newValue) => set({ value: newValue }),
}));

function ChildA() {
  const setValue = useStore((state) => state.setValue);
  return <input onChange={(e) => setValue(e.target.value)} />;
}

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

使用自定义事件

通过事件总线或自定义事件实现通信（较少使用，可能带来维护问题）。

const EventEmitter = {
  events: {},
  emit(event, data) {
    if (!this.events[event]) return;
    this.events[event].forEach(callback => callback(data));
  },
  on(event, callback) {
    if (!this.events[event]) this.events[event] = [];
    this.events[event].push(callback);
  }
};

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

function ChildB() {
  const [value, setValue] = useState('');
  useEffect(() => {
    EventEmitter.on('update', setValue);
  }, []);
  return <div>{value}</div>;
}

选择方法时应考虑组件层级复杂度、应用规模和维护成本。状态提升适合简单场景，Context适合中等复杂度，状态管理库适合大型应用。

react兄弟组件之间如何传值