ReactJS: Dynamisch einbinden

Dawosch

Neues Mitglied
Guten Abend zusammen,
ich habe eine Frage und hoffe, dass hier evtl. ein paar Leute mit ReactJS Erfahrung haben.

Also, ich habe eine React Wetter Widget erstellt.
Ich nenne es mal Widget, weil es später als Widget auf einer anderen Seite eingebunden werden soll.

Dieses Wetter Widget habe ich jetzt gebaut und habe nun 3 Dateien innerhalb des /dist/js/ Ordners:
- Chunk1.js
- Main.js
- Runtime.js

Die restlichen Dateien (css und index.html) ignorieren wir für's erste.

Meine Idee is, dass ich mein Widget jetzt auf einer anderen Seite einbinde, indem diese vier JS Dateien via script-Tag auf der Seite lade und mit dem entsprechenden div einbinde.
In ReactJS gibt man ja den Einbindepunkt als z.B. div mit ID an.
Wenn ich dieses div jetzt auf die andere Seite packe sollte das Widget ja angezeigt werden.

Jetzt möchte ich das Widget aber gerne mehrfach auf der Seite einbinden und am besten noch parametrisieren.
Und genau hier hänge ich jetzt.
Im React-Widget muss ich ja vor dem Bauen sagen, wie das div heißt wo sich das Widget einhängen soll.
Über eine ID wäre das nicht mehr HTML valide, da zwei Elemente die selbe ID hätten.

Das zweite Problem ist, dass ich auch z.B. sagen möchte, welches Wetter ich anzeigen lassen möchte.
Sprich ich müsste noch irgendwie ein Länderkürzel oder was auch immer als Parameter mitgeben.
Aber auch hier habe ich keine Ahnung, wie ich Parameter von Außen in die ReactJS bringe.


Habt ihr evtl. eine Idee, wie das Funktionieren könnte?
Das ganze soll sehr einfach und dynamisch gehalten werden. Sprich das laden der "Konfig" soll nicht über das Abfragen einer API innerhalb des React Widgets passieren. Oder wenn muss auf jeden Fall die entsprechende DB als Parameter übergeben werden sollen.
 
Vergiss das mit dem "#root" div direkt😂
React zeichnet sich mit den Components aus, die man so oft man möchte, benutzen kann. Fürs Erste sind für dich Components und Props (= ähnlich wie Parameter) am relevantesten.

Guck dir am besten das Video an: https://youtu.be/PHaECbrKgs0
wenn du hilfe brauchst, künftig gerne mit code👍
 
Zurück
Oben Unten