Reagieren Redux append Komponenten

Question

Ich habe ein Projekt, das ich arbeite, das ist ein HTML-Seitengenerator der Arten. Der Benutzer kann aus einer Liste vordefinierter HTML-Seitenabschnitte (Kopfzeile, Schieberegler, Inhaltsblöcke, Fußzeilen usw.) aus einem Menü auswählen und sie auf einer Zeichenfläche ablegen, um eine Webseite zu erstellen. Das Endergebnis ist eine herunterladbare Zip-Datei, die eine statische Website enthält.

Meine Anwendung Layout sieht wie folgt aus so weit:

I Teil 1,2 & 3 bedeckt haben. Teil 4, eine herausziehbare Schublade, enthält die HTML-Abschnitte. Wenn ich darauf klicke, möchte ich die entsprechende Komponente an den Hauptbereich der Seite anhängen. Dieser Vorgang wird wiederholt, bis die Webseite erstellt wurde. Jede Komponente kann dann bearbeitet und schließlich als Seite gespeichert werden.

Ich suche Ratschläge, wie ich mit React/Redux vollständige Komponenten an den Hauptbereich onclick anhänge?

Ich nehme an, ich verschicke Aktion/Reducer Verweis auf eine Komponente, aber wie füge ich tatsächlich und verfolgen Sie die Komponenten an den Hauptbereich angefügt? Mit jQuery wäre dies eine einfache jQuery .load() aber in React/Redux habe ich keine Ahnung, vielleicht einen Trick, den ich mit React Router verwenden kann?

Kann mir jemand helfen, in die richtige Richtung zu zeigen? Weiter lesen etc.

Vielen Dank im Voraus.

Answer 1

Lose, möchten Sie eine Art von ID zu jeder Komponente zuordnen, dann speichern Sie diese IDs im Laden, so etwas wie mainArea = [id1, id6, id12] etc. Dann Ihre <MainArea /> Komponente iteriert einfach über die Requisiten und Referenzen Ihre bestehende Karte, um die richtige zu laden Komponenten.

Edit: Klärung, wie eine Karte von Komponenten zu nutzen.

Dies ist in etwa das, was Sie suchen. Nehmen wir an, die obigen IDs sind unsere Komponenten. Irgendwo in unserer Code-Basis würden wir eine Zuordnung dieser IDs Komponenten haben:

const Component1 = React.createClass(...) 
const Component6 = React.createClass(...) 
const Component12 = React.createClass(...) 

const componentMap = { 
    id1: Component1, 
    id6: Component6, 
    id12: Component12, 
} 

Dann, wenn Ihre <MainArea /> Komponente iteriert durch die IDs, die sie gespeichert haben, es würde die entsprechende Komponente aus dem Mapping zieht oben und macht es.