Open sandlz opened 5 days ago
In my App, there are a lot of modals that need to be displayed, so in some business scenarios, there may be 5 or more modals displayed cascading.
As follows: Modal-A -- Modal-B ------ Modal-C ---------- Modal-D
Example link
export const ModalConstant = { modalA: "Modal_A", modalB: "Modal_B", modalC: "Modal_C", };
2. in `index.tsx`, call register function ```ts NiceModal.register(ModalConstant.modalA, ModalA); NiceModal.register(ModalConstant.modalB, ModalB); NiceModal.register(ModalConstant.modalC, ModalC);
in App.tsx
App.tsx
export default function App() { console.log("App render"); const showModalA = () => { NiceModal.show(ModalConstant.modalA, {}); }; return ( <div className="App"> <h1>Muti Modal Re-render demo</h1> <Button variant="secondary" onClick={showModalA}> Show Modal [A] </Button> </div> ); }
muti modal.tsx
modal.tsx
ModalA.tsx
ModalB
ModalB.tsx
ModalC
import BootstrapModal from "react-bootstrap/Modal"; import NiceModal, { useModal, bootstrapDialog } from "@ebay/nice-modal-react"; import { ModalConstant } from "../constant"; import Button from "react-bootstrap/Button";
const ModalA = NiceModal.create(() => { const modal = useModal();
console.log("Modal [A] render", id: ${modal.id}, visible: ${modal.visible}); const showModalB = () => { NiceModal.show(ModalConstant.modalB, {}); };
id: ${modal.id}, visible: ${modal.visible}
return ( <BootstrapModal {...bootstrapDialog(modal)}>
This is modal A.
@supnate can you help me? thanks.
Business description
In my App, there are a lot of modals that need to be displayed, so in some business scenarios, there may be 5 or more modals displayed cascading.
As follows: Modal-A -- Modal-B ------ Modal-C ---------- Modal-D
Code description
Example link
in
App.tsx
muti
modal.tsx
ModalA.tsx
, click will showModalB
ModalB.tsx
, click will showModalC
...const ModalA = NiceModal.create(() => { const modal = useModal();
console.log("Modal [A] render",
id: ${modal.id}, visible: ${modal.visible}
); const showModalB = () => { NiceModal.show(ModalConstant.modalB, {}); };return ( <BootstrapModal {...bootstrapDialog(modal)}>
This is modal A.