müssen wir einen modalen Dialog mit Overlay-Hintergrund in Reactjs als React Komponenten erstellen.Wenn der Benutzer auf das Overlay klicken, sollte das Modal geschlossen werden. Wir müssen das Modal in einer Weise erstellen dass es wiederverwendbar ist. Komponente reaktivieren. jemand plz führe mich nach Hause Ich kann dies implementierenSo erstellen Sie ein benutzerdefiniertes Modal in Reactjs
Ich empfehle dringend Spaziergang durch react-modal Quelle https://github.com/reactjs/react-modal für "wie" zu implementieren Sie Ihre eigenen.
Ich bin diesen Weg der Implementierung von benutzerdefinierten Modalitäten von Grund auf ein paar Mal jetzt selbst gegangen, und ich muss empfehlen, einfach in react-modal statt versuchen, das gleiche Rad neu zu erfinden [Ich habe inzwischen selbstgewonnenen Implementierungen w ersetzt/reaktiv-modal]. Ich habe experimentiert mit ein paar verschiedenen React Modal-Paketen und react-modal ist vollständig anpassbar, kampfgetestet und hat eine großartige API. Ich habe fast identische Fragen hier beantwortet: How to: ES6 React Modal und hier: React conditional render pattern mit einigen mehr Gedanken/Beispiele/Links.
Nur für alternative Route könnten Sie das neue <dialog> Element verwenden, die Browser-Unterstützung ist eher niedrig (http://caniuse.com/#search=dialog), aber mit Polyfill könnte dies behoben werden. Dies bietet jedoch eine einfache und erweiterbare Möglichkeit, Dialoge zu erstellen, siehe Demo .
Dies ist das erste, das ich von einem nativen Dialogelement gehört habe. Wow, das wird unglaublich, sobald der Browser-Support aufholt! Ich werde dieses hier im Auge behalten müssen. – ErikTheDeveloper
Werfen Sie einen Blick auf react-bootstrap - es implementiert die Funktionalität, nach der Sie suchen. – CapCa
Möchten Sie, dass dieses modal immer die gleiche html (jsx) Struktur oder einen spezifischen html für jeden Fall enthält? – stkvtflw