Was ist die beste Praxis für das dynamische Laden <script> und CSS Reactjs

Question

Guten Morgen! aus Indonesien, naja, ich muss dynamisch verschiedene CSS und Javascript für verschiedene Komponenten laden, zum Beispiel ich habe Slideshow-Komponente, dann muss ich js und css-Dateien im Zusammenhang damit laden, und ich habe Formular-Komponente, ich muss die zugehörige CSS und JSS laden Dateien auch.

Was ist der richtige Weg oder Best Practice, um es in react.js zu tun? Vielen Dank.

Answer 1

Wenn Sie davon sprechen, dass Sie sie benötigen, wenn Sie Ihre App erstellen, können Sie dazu ein Build-Tool namens webpack verwenden. Es wird über Ihren Code schauen und alle benötigten Dateien in einem neuen Ordner für Sie bündeln. Sie benötigen/importieren nur die zugehörigen Dateien in Ihrer Komponente js.

here's ein gutes Tutorial für Sie.

wenn Sie sprechen dynamisch die Stile und Skripte als die Diashow Komponente Laden geladen ist, können Sie einfach schließen eine

<script> and or <link> 

in Ihrer Methode machen.

Beachten Sie, dass eine reaktive Komponente das DOM nicht direkt ändern soll. Wenn Sie also ein js-Diashow-Widget haben, das Sie "komponieren" möchten, können Probleme auftreten.

Answer 2

Meine Antwort sollte mit einem Körnchen gelesen werden, dass es eine rechthaberische Antwort auf eine breite Frage ist, die Sie gestellt haben.

IMO, eine gute und moderne Möglichkeit, CSS + + JavaScript + HTML-Bits dynamisch und wenn erforderlich zu laden, ist neben WebComponents zu verwenden. Werfen Sie einen Blick auf WebComponents section on react's website und achten Sie genau auf die Probleme, die bei der Verwendung von WebComponents auftreten können.

Hier ist ein Ausgang Beispiel: WebComponent + React Example