react中同级组件如何传值
同级组件传值方法
在React中，同级组件之间传值通常需要通过共同的父组件作为中介。以下是几种常见的实现方式：
状态提升（Lifting State Up）
将共享状态提升到最近的共同父组件中，通过props向下传递数据和方法。
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。
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>;
}方法选择建议
- 简单场景：状态提升
- 中等复杂度：Context API
- 大型应用：状态管理库
- 特殊需求：事件总线（谨慎使用）
所有方法都遵循React单向数据流原则，选择取决于项目规模和组件结构复杂度。
