React implementiert dynamische Popup-Fensterkomponente

Schnittstelle ModalProps {
  öffnen: Boolesch;
  beim Schließen?: () => ungültig;
  Kinder?: irgendwelche;
}
const Modal = ({open.onClose, children}: ModalProps) => {
  wenn (!öffnen) {
    gibt null zurück;
  }
  returniere Portal erstellen(<div>
    <div Klassenname = "modal-content">{Kinder}</div>
    <div Klassenname = "modal-close-btn" onclick = "{onClose}">x</div>
  </div>, Dokument.Text);
};

const App = () => {
  const [öffnen, setOpen] = useState(false);

  zurückkehren (
    <div Klassenname="App">
      <button onclick="{()" ==""> setOpen(true)}>Modal anzeigen</button>
      <modal öffnen="{öffnen}" onclose="{()" ==""> setzeÖffnen(false)}>
        Modale Inhalte
      </modal>
    </div>
  );
};

const Modal = ({ öffnen, untergeordnete Elemente, beim Schließen }) => {
  const [active, setActive] = useState(false); // Existenzzyklus des Popup-Fensters if (!open && !active) {
    gibt null zurück;
  }

  ReactDOM.createPortal zurückgeben (
    <div Klassenname="modal">
      <div Klassenname = "modal-content">{Kinder}</div>
      <div Klassenname="modal-close-btn" onclick="{onClose}">
        X
      </div>
    </div>,
    Dokument.Text,
  );
};

const [aniClassName, setAniClassName] = useState(''); // Animationsklasse

// Ausführung des Übergangs abgeschlossen. Listening-Funktion const onTransitionEnd = () => {
  // Wenn „open“ aktiv ist, ist der Endzustand „enter-done“
  // Wenn „open“ nicht „false“ ist, lautet der Endstatus „exit-done“
  setAniClassName(öffnen? 'Eingeben-Fertig': 'Beenden-Fertig');

  // Wenn open false ist, endet der Lebenszyklus des Popup-Fensters, wenn die Animation endet if (!open) {
    setzeAktiv(falsch);
  }
};

useEffect(() => {
  wenn (öffnen) {
    setzeAktiv(true);
    setAniClassName('eingeben');
    // setTimeout wird verwendet, um Klassen zu wechseln und den Übergang zu ermöglichen setTimeout(() => {
      setAniClassName('aktiv eintreten');
    });
  } anders {
    setAniClassName('beenden');
    setzeTimeout(() => {
      setAniClassName('exit-aktiv');
    });
  }
}, [offen]);

const Modal = ({ öffnen, untergeordnete Elemente, beim Schließen }) => {
  const [active, setActive] = useState(false); // Existenzzyklus des Popup-Fensters const [aniClassName, setAniClassName] = useState(''); // Animationsklasse
  const onTransitionEnd = () => {
    setAniClassName(öffnen? 'Eingeben-Fertig': 'Beenden-Fertig');
    wenn (!öffnen) {
      setzeAktiv(falsch);
    }
  };

  useEffect(() => {
    wenn (öffnen) {
      setzeAktiv(true);
      setAniClassName('eingeben');
      setzeTimeout(() => {
        setAniClassName('aktiv eintreten');
      });
    } anders {
      setAniClassName('beenden');
      setzeTimeout(() => {
        setAniClassName('exit-aktiv');
      });
    }
  }, [offen]);

  wenn (!öffnen && !aktiv) {
    gibt null zurück;
  }

  ReactDOM.createPortal zurückgeben (
    <div classname="{'modal" '="" +="" aniclassname}="" ontransitionend="{onTransitionEnd}">
      <div Klassenname = "modal-content">{Kinder}</div>
      <div Klassenname="modal-close-btn" onclick="{onClose}">
        X
      </div>
    </div>,
    Dokument.Text,
  );
};

.eingeben {
  Deckkraft: 0;
}
.aktiv eingeben {
  Übergang: Deckkraft 200 ms, leichtes Ein-Aus;
  Deckkraft: 1;
}
.Eingabe-fertig {
  Deckkraft: 1;
}
.Ausfahrt {
  Deckkraft: 1;
}
.exit-aktiv {
  Deckkraft: 0;
  Übergang: Deckkraft 200 ms, leichtes Ein-Aus;
}
.beenden-fertig {
  Deckkraft: 0;
}

const App = () => {
  const [öffnen, setOpen] = useState(false);

  zurückkehren (
    <div Klassenname="App">
      <button onclick="{()" ==""> setOpen(true)}>Modal anzeigen</button>
      <modal öffnen="{öffnen}" onclose="{()" ==""> setzeÖffnen(false)}>
        Modale Inhalte
      </modal>
    </div>
  );
};

const Modal = ({ öffnen, beim Schließen }) => {
  // http://reactcommunity.org/react-transition-group/css-transition/
  // in der Eigenschaft ist true/false, true bedeutet, die Animation zu erweitern, false bedeutet, die Animation zu schließen return createPortal(
    <csstransition in="{open}" timeout="{200}" unmountonexit="">
      <div Klassenname="modal">
        <div Klassenname = "modal-content">{Kinder}</div>
        <div Klassenname="modal-close-btn" onclick="{onClose}">
          X
        </div>
      </div>
    </csstransition>,
    Dokument.Text,
  );
};