当前位置：首页 > React

react兄弟之间如何传值

2026-01-25 03:33:57React

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

通过父组件传递状态和回调函数

父组件维护状态，并将状态和修改状态的函数通过 props 分别传递给两个子组件。子组件通过调用父组件传递的函数来更新状态，从而实现兄弟组件之间的通信。

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

  return (
    <div>
      <ChildA value={value} onValueChange={setValue} />
      <ChildB value={value} />
    </div>
  );
}

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

// 子组件B
function ChildB({ value }) {
  return <p>接收到的值: {value}</p>;
}

使用 Context API

当组件层级较深时，可以使用 React 的 Context API 来共享状态，避免 props 层层传递。

const ValueContext = createContext();

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

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

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

function ChildB() {
  const { value } = useContext(ValueContext);
  return <p>接收到的值: {value}</p>;
}

使用状态管理库

对于复杂的应用，可以使用 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 <p>接收到的值: {value}</p>;
}

使用自定义事件

通过自定义事件（EventEmitter）来实现兄弟组件之间的通信，适用于非父子关系的组件。

// 创建事件总线
const eventBus = new EventEmitter();

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

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

  useEffect(() => {
    const handler = (value) => setValue(value);
    eventBus.on('valueChange', handler);
    return () => eventBus.off('valueChange', handler);
  }, []);

  return <p>接收到的值: {value}</p>;
}

以上方法可以根据具体场景选择使用。对于简单的兄弟组件通信，推荐使用父组件传递状态的方式；对于复杂场景，Context API 或状态管理库更为合适。

react兄弟之间如何传值