Wie rendere ich Komponenten in React/JSX dynamisch?

Dynamisches Komponenten-Rendering in React/JSX

Reacts JSX ermöglicht das deklarative Komponenten-Rendering, aber manchmal müssen Entwickler Komponenten basierend darauf dynamisch rendern ihre Art.

Die Problem

Beim Versuch, eine Komponente mithilfe des folgenden Codeausschnitts dynamisch zu rendern, tritt ein Fehler auf:

var type = "Example";
var ComponentName = type + "Component";
return <ComponentName />; // Error: expected XML, got array

Der Fehler tritt auf, weil der Code Array-Syntax verwendet, während JSX XML erwartet . Andere Lösungen, wie das Erstellen einer Methode für jede Komponente, sind nicht elegant.

Die Lösung

Die React-Dokumentation bietet jetzt eine offizielle Lösung für dynamisches Komponenten-Rendering:

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

Dieser Code wird wie folgt kompiliert:

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

Die Variable MyComponent speichert die Komponentenklasse und wird großgeschrieben. Die Funktion React.createElement verwendet dann diese Klasse, um das Komponentenelement zu erstellen.

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