react兄弟之间如何传值
在 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 或状态管理库更为合适。
