Wie rendere ich dynamische Komponentennamen in React und JSX?

Dynamische Komponentennamen in React und JSX

In React können Sie durch dynamisches Komponenten-Rendering Komponenten basierend auf ihrem Typ zur Laufzeit erstellen. Betrachten Sie zur Veranschaulichung das folgende Beispiel:

var type = "Example";
var ComponentName = type + "Component";
return <ComponentName />; // Returns <examplecomponent /> instead of <ExampleComponent />

Eine frühere Lösung, die im Thread „Dynamische Komponentennamen von React/JSX“ vorgeschlagen wurde, führte aufgrund von Syntaxunterschieden zu einem Kompilierungsfehler. Alternativ könnte für jede Komponente eine eigene Methode erstellt werden:

newExampleComponent() {
    return <ExampleComponent />;
}

newComponent(type) {
    return this["new" + type + "Component"]();
}

Allerdings erfordert dieser Ansatz eine neue Methode für jede Komponente, was umständlich sein kann.

Glücklicherweise gibt es eine Eine elegantere Lösung besteht darin, den Komponententyp als Zeichenfolge an die Funktion React.createElement() zu übergeben. Diese Funktion rendert die Komponente mithilfe des bereitgestellten Typs. Zum Beispiel:

var MyComponent = Components[type + "Component"];
return <MyComponent />;

Dieser Code wird kompiliert zu:

var MyComponent = Components[type + "Component"];
return React.createElement(MyComponent, {});

Das obige ist der detaillierte Inhalt vonWie rendere ich dynamische Komponentennamen in React und JSX?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!