react中modal之间如何传值
在React中Modal之间传值的方法
使用Context API共享状态 创建一个Context来管理Modal之间需要共享的数据。父组件或顶层组件提供Context，所有Modal通过useContext钩子访问和更新数据。
const ModalContext = React.createContext();
function App() {
const [sharedData, setSharedData] = useState(null);
return (
<ModalContext.Provider value={{ sharedData, setSharedData }}>
<ModalA />
<ModalB />
</ModalContext.Provider>
);
}
function ModalA() {
const { setSharedData } = useContext(ModalContext);
const sendData = () => setSharedData("Data from ModalA");
}
function ModalB() {
const { sharedData } = useContext(ModalContext);
return <div>{sharedData}</div>;
}通过父组件状态提升 将共享状态提升到共同的父组件中，通过props将状态和更新函数传递给各个Modal组件。
function ParentComponent() {
const [modalData, setModalData] = useState(null);
return (
<>
<ModalA onDataSend={setModalData} />
<ModalB receivedData={modalData} />
</>
);
}使用状态管理库 对于复杂应用，可以使用Redux、MobX或Zustand等状态管理库。在store中定义共享状态，各个Modal通过dispatch actions或直接读取store来交互。
// 使用Zustand示例
const useStore = create(set => ({
modalData: null,
setModalData: (data) => set({ modalData: data })
}));
function ModalA() {
const setModalData = useStore(state => state.setModalData);
const sendData = () => setModalData("Data from ModalA");
}
function ModalB() {
const modalData = useStore(state => state.modalData);
return <div>{modalData}</div>;
}通过事件总线/自定义事件 创建事件发射器模式，允许Modal之间直接通信而不需要共同父组件。
const events = new EventEmitter();
function ModalA() {
const emitData = () => events.emit("data", "Data from ModalA");
}
function ModalB() {
const [data, setData] = useState(null);
useEffect(() => {
events.on("data", setData);
return () => events.off("data", setData);
}, []);
return <div>{data}</div>;
}URL参数传递 如果Modal通过路由控制显示，可以通过URL参数或查询字符串传递数据。
// ModalA中
history.push("/modal-b?data=value");
// ModalB中
const location = useLocation();
const params = new URLSearchParams(location.search);
const data = params.get("data");使用React Portals和refs 当Modal需要直接操作另一个Modal的DOM元素时，可以通过refs和React Portals结合实现。
const ModalA = forwardRef((props, ref) => {
useImperativeHandle(ref, () => ({
getData: () => "Data from ModalA"
}));
});
function Parent() {
const modalARef = useRef();
const [data, setData] = useState(null);
const getDataFromA = () => {
setData(modalARef.current.getData());
};
return (
<>
<ModalA ref={modalARef} />
<ModalB onRequestData={getDataFromA} data={data} />
</>
);
}选择方法时应考虑组件层级关系、数据流复杂度和应用规模。对于简单场景，状态提升或Context足够；复杂应用建议使用状态管理库；需要解耦时可采用事件总线；路由相关场景适合URL参数传递。
