在反应应用中动态显示自定义模态

Question

在反应应用程序中，我正在尝试显示带有表单的模态。关于如何做到这一点的任何建议。 提前谢谢。

Answer 1

由于通常屏幕上同时只有一个模态，因此为此目的使用Context/Provider是一种非常常见的做法。首先，您需要为模态创建上下文：

const ModalContext = React.createContext();

然后你自己的模态提供者：

const ModalProvider = ({ children }) => {
const [ modal, setModal ] = React.useState(null);
const showModal = renderProp => setModal(renderProp);
const hideModal = () => setModal(null);
return (
<ModalContext.Provider value={ showModal }>
{ children }
{ modal && (
<div className="overlay" />
{ renderProp(hideModal) }
) }
</ModalContext.Provider>
);
}

自己的模式提供程序应将应用包装在某个根级别：

const App = () => (
<ModalProvider>
<LandingPage />
</ModalProvider>
);

然后，您只需在任何组件中使用此上下文来显示模态：

const renderModal(hideModal) => {
// call hideModal to hide modal
};
const Page = () => {
const showModal = useContext(ModalContext);
const onClick = showModal(renderModal);
return (
<Button onClick={ onClick }>Show Modal!</Button>
);
}

如果您的应用程序中已经有 redux，则可以将其用于相同的目的 - 通过使用模态数据设置一些全局状态：

const modalReducer = (state, { type, payload }) => {
switch (type) {
case SHOW_MODAL:
return { ...state, modal: payload };
case HIDE_MODAL:
return { ...state, modal: null };
default:
return state;
}
};