react兄弟组件之间如何传值
兄弟组件传值方法
在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适合中等复杂度，状态管理库适合大型应用。
