当前位置：首页 > React

react兄弟之间如何传值

2026-03-11 12:34:21React

兄弟组件传值方法

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

状态提升（Lifting State Up）

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

react兄弟之间如何传值

// 父组件
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>Received: {value}</div>;
}

使用Context API

创建Context提供全局状态，兄弟组件通过Context Consumer或useContext Hook访问共享数据。

const SharedContext = createContext();

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

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

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

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

使用状态管理库（如Redux）

通过Redux等状态管理库维护全局状态，兄弟组件通过connect或hooks访问store。

react兄弟之间如何传值

// store配置
const store = configureStore({
  reducer: {
    shared: sharedReducer
  }
});

// 组件A
function ChildA() {
  const dispatch = useDispatch();
  return <input onChange={(e) => dispatch(updateValue(e.target.value))} />;
}

// 组件B
function ChildB() {
  const value = useSelector((state) => state.shared.value);
  return <div>Value: {value}</div>;
}

使用自定义事件（Event Emitter）

通过事件发布订阅模式实现通信，适用于较复杂的场景。

const emitter = new EventEmitter();

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

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

使用ref和回调

通过父组件转发ref实现兄弟组件间的直接调用（不推荐常规使用）。

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

  const handleChange = (value) => {
    childBRef.current.updateValue(value);
  };

  return (
    <>
      <ChildA onChange={handleChange} />
      <ChildB ref={childBRef} />
    </>
  );
}

const ChildB = forwardRef((props, ref) => {
  const [value, setValue] = useState('');

  useImperativeHandle(ref, () => ({
    updateValue: setValue
  }));

  return <div>Value: {value}</div>;
});