reactjs - 使用可以从多个页面触发的 React Modal react/next.js

Question

我有一个 Modal 被触发，但不同组件中有许多不同的按钮。我已经能够通过在布局中传递变量来让它在页面上工作，例如

    const index = () => {
       const [show, setShow] = useState(false)
       const handleShow = () => { setShow(true) }
       const handleClose = () => { setShow(false) }

       <Layout pageTitle={pageTitle} metaUrl={metaUrl} show={show} onHide={handleHide}>
       ...
       </Layout>
    }

并使用这些变量从 Layout 传递到 Modal 组件，这样就可以很好地触发模态。但它只适用于页面，因为我可以在布局中传递它们，但是我在 Navbar 和 Footer 中有按钮被导入到 Layout 中并且不使用 Layout 所以我不确定如何实际将变量传递给模态那些。

任何帮助都会很棒!

Answer 1

对于这种情况，我认为完美的解决方案是使用 React Context，您可以将其分离到自己的钩子(Hook)中，然后在整个应用程序需要时使用此钩子(Hook)。首先，您需要创建上下文

const ModalContext = React.createContext()
// give it a display name so it would be easier to debug
ModalContext.dispalyName = 'ModalContext'

然后你需要为这个上下文创建 Provider 并将它放在你的应用程序树中更高的位置，因为你只能在它的 Provider 下使用这个上下文，因为你正在使用 Next.js 我建议在 _app.js 或者就在您的主要应用程序组件周围。

const ModalContextProvider = ({children}) => {
   const [isOpend, setIsOpend] = React.useState(false);
   // handle any additional data needed with useState/useReducer
   const [title, setTitle] = React.useState('default title');

   const value = {setIsOpened, setTitle};

  return <ModalContext.Provider value={value}>
          <ModalComponent isOpend={isOpend} title={title}/>
           {children}
        </ModalContext.Provider>
}

因此在创建 ModalContext 组件并将其放在您的主要应用程序组件上方之后，您可以像这样在它自己的钩子(Hook)中提取此上下文功能

function useModalContext() {
   const context = React.useContext(ModalContext);
   // if context is undefined this means it was used outside of its provider
   // you can throw an error telling that to your fellow developers
   if(!context) {
     throw new Error('useModalContext must be used under <ModalContextProvider/>');
   }
   return context;
}

然后在任何组件中，你都可以像这样使用这个钩子(Hook)

const {setIsOpened, setTitle} = useModalContext();

const handleOpenModal() {
  setIsOpened(true);
  setTitle('Modal Title');
}

return <button onClick={handleOpenModal}>Show Modal</button>

如果它位于上下文提供程序组件下，您可以在应用中的任何位置使用它。