Question

在React应用中，我试图显示带有形式的模式。关于如何做到这一点的任何建议。预先感谢。

Answer 1

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

const ModalContext = React.createContext();

然后创建您自己的ModalProvider：

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;
  }
};

在React App中动态显示自定义模态

1 个答案: