Ich versuche, Komponenten basierend auf ihrem Typ dynamisch zu rendern.
Beispielsweise:
var type = "Example";
var ComponentName = type + "Component";
return <ComponentName />;
// Returns <examplecomponent /> instead of <ExampleComponent />
Ich habe die hier vorgeschlagene Lösung ausprobiert. React / JSX-Namen dynamischer Komponenten
Das gab mir einen Fehler beim Kompilieren (mit browserify für gulp). Es erwartete XML, wo ich eine Array-Syntax verwendete.
Ich könnte dies lösen, indem ich für jede Komponente eine Methode erstelle:
newExampleComponent() {
return <ExampleComponent />;
}
newComponent(type) {
return this["new" + type + "Component"]();
}
Dies würde jedoch eine neue Methode für jede von mir erstellte Komponente bedeuten. Es muss eine elegantere Lösung für dieses Problem geben.
Ich bin sehr offen für Vorschläge.
{...this.props}
nützlich finden , Requisiten transparent an untergeordnete Komponenten vom übergeordneten Element zu übergeben. Wiereturn <MyComponent {...this.props} />
Eine offizielle Dokumentation zum Umgang mit solchen Situationen finden Sie hier: https://facebook.github.io/react/docs/jsx-in-depth.html#choosing-the-type-at-runtime
Grundsätzlich heißt es:
Falsch:
Richtig:
quelle
Es sollte einen Container geben, der Komponentennamen allen Komponenten zuordnet, die dynamisch verwendet werden sollen. Komponentenklassen sollten in einem Container registriert werden, da es in einer modularen Umgebung ansonsten keinen einzigen Ort gibt, an dem auf sie zugegriffen werden kann. Komponentenklassen können nicht anhand ihrer Namen identifiziert werden, ohne sie explizit anzugeben, da die Funktion
name
in der Produktion minimiert wird.Komponentenzuordnung
Es kann ein einfaches Objekt sein:
Oder
Map
Instanz:Ein einfaches Objekt ist besser geeignet, da es von der Kurzform des Eigentums profitiert.
Laufmodul
Ein Fassmodul mit benannten Exporten kann als solche Karte fungieren:
Dies funktioniert gut mit einer Klasse pro Modulcodestil.
Dekorateur
Dekorateure können mit Klassenkomponenten für syntaktischen Zucker verwendet werden. Dazu müssen die Klassennamen noch explizit angegeben und in einer Map registriert werden:
Ein Dekorateur kann als Komponente höherer Ordnung mit Funktionskomponenten verwendet werden:
Die Verwendung von nicht standardmäßigen
displayName
Eigenschaften anstelle von zufälligen Eigenschaften kommt auch dem Debuggen zugute.quelle
Ich habe eine neue Lösung gefunden. Beachten Sie, dass ich ES6-Module verwende und daher die Klasse benötige. Sie können stattdessen auch eine neue React-Klasse definieren.
quelle
default
Attribut zuzugreifen ? dh: require ('./ ExampleComponent'). default?Wenn Ihre Komponenten global sind, können Sie einfach Folgendes tun:
quelle
Components
Array nicht definiert ist.Für eine Wrapper-Komponente besteht eine einfache Lösung darin, sie direkt zu verwenden
React.createElement
(mit ES6).quelle
Bei allen Optionen mit Komponentenzuordnungen habe ich nicht den einfachsten Weg gefunden, die Zuordnung mithilfe der kurzen ES6-Syntax zu definieren:
quelle
Eine Karte zu haben, sieht mit einer großen Anzahl von Komponenten überhaupt nicht gut aus. Ich bin tatsächlich überrascht, dass niemand so etwas vorgeschlagen hat:
Dieser hat mir wirklich geholfen, als ich eine ziemlich große Anzahl von Komponenten rendern musste, die in Form eines JSON-Arrays geladen wurden.
quelle
React.createElement(MyComponent)
direkt aufzurufen, warf einen Fehler auf. Insbesondere möchte ich nicht, dass das übergeordnete Element alle zu importierenden Komponenten (in einem Mapping) kennen muss - da dies ein zusätzlicher Schritt zu sein scheint. Stattdessen habe ich verwendetconst MyComponent = require("path/to/component/" + "ComponentNameString").default; return <MyComponent />
.Vermutlich möchten wir mit dynamischem Laden von Komponenten auf verschiedene Ansichten zugreifen. Der folgende Code gibt ein funktionierendes Beispiel dafür, wie dies mithilfe einer Zeichenfolge erreicht wird, die aus der Suchzeichenfolge einer URL analysiert wird.
Nehmen wir an, wir möchten über diese URL-Pfade auf eine Seite 'snozberrys' mit zwei eindeutigen Ansichten zugreifen:
und
Wir definieren den Controller unserer Ansicht folgendermaßen:
quelle
Angenommen, wir haben eine
flag
, nicht anders als diestate
oderprops
:Mit Flag
Compo
füllen Sie mit einem vonComponentOne
oderComponentTwo
und dannCompo
kann die Dose wie eine Reaktionskomponente wirken.quelle
Ich habe einen etwas anderen Ansatz verwendet, da wir immer unsere tatsächlichen Komponenten kennen, also dachte ich, Switch Case anzuwenden. Auch die Gesamtzahl der Komponenten lag in meinem Fall bei 7-8.
quelle
Bearbeiten: Andere Antworten sind besser, siehe Kommentare.
Ich habe das gleiche Problem folgendermaßen gelöst:
quelle
React.createElement
dies für jede Komponente in Ihrem Suchobjekt aufgerufen wird, obwohl jeweils nur eine davon gerendert wird. Schlimmer noch, wenn Sie das Suchobjekt in dierender
Methode der übergeordneten Komponente einfügen, wird es jedes Mal erneut ausgeführt, wenn das übergeordnete Objekt gerendert wird. Die besten Antworten sind ein viel besserer Weg, um dasselbe zu erreichen.