Eine dynamische Komponente in React auswählen

Um eine von mehreren Komponenten in React zu rendern, ordnen Sie jede erlaubte Kategorie einer Komponentenfunktion zu, schlagen Sie die ausgewählte Funktion nach und rendern Sie sie über eine JSX-Variable, die mit einem Großbuchstaben beginnt. Eine Kategoriezeichenfolge wie "text" kann eine Komponente auswählen, aber einen Komponentennamen als Zeichenfolge zu erstellen, verwandelt diese Zeichenfolge nicht in eine Referenz auf eine JavaScript-Variable.

Dynamische Komponentennamen und JSX

JSX ist Syntax zum Beschreiben einer UI, kein separater Mechanismus zum Nachschlagen von Komponenten. In JSX bezeichnet ein klein geschriebener Name wie <section> ein integriertes HTML-Element, während ein Bezeichner mit Großbuchstaben wie <SomeComponent /> auf eine JavaScript-Variable im Geltungsbereich verweist. Diese Variable muss die Komponentenfunktion oder einen anderen unterstützten Komponententyp enthalten.

JSX wird entsprechend den Compiler-Einstellungen des Projekts transformiert. Einige Setups verwenden React.createElement; andere verwenden eine andere Laufzeitumgebung, sodass die genauen generierten Aufrufe von der Konfiguration abhängen. React.createElement ist eine Funktion, die ein React-Element erstellen kann, wenn ihr ein unterstützter Elementtyp und Props übergeben werden.

Dynamischer Komponentenname in React

Angenommen, ein Blog kann Text-, Video- oder Bildinhalte anzeigen. Definieren Sie diese Komponenten zuerst und wählen Sie dann zwischen ihren Referenzen. Das Verketten eines Namens erzeugt nur eine Zeichenfolge:

const SomeComponent = category + "Component";

Wenn category zum Beispiel "Text" ist, wird SomeComponent zu "TextComponent". JSX verwendet diese Zeichenfolge nicht, um den JavaScript-Geltungsbereich nach einer Variable mit demselben Namen zu durchsuchen. Eine Zeichenfolge kann in APIs, die Elementtypen als Zeichenfolge unterstützen, ein integriertes HTML-Tag darstellen, aber sie löst keine Variable einer benutzerdefinierten Komponente auf. Die Großschreibung der Zeichenfolge zu ändern, ändert weder ihren Typ, noch macht sie sie zu einer Komponentenreferenz.

Richtige Vorgehensweise für einen dynamischen Komponentennamen in React

Erstellen Sie eine explizite Zuordnung von erlaubten Kategoriewerten zu den bereits definierten Komponenten. Schlagen Sie die ausgewählte Referenz nach, prüfen Sie, ob die Kategorie unterstützt wird, und rendern Sie die Referenz mit einem JSX-Bezeichner, der mit einem Großbuchstaben beginnt:

Dieses vollständige JavaScript-Beispiel hält die Komponentenauswahl in einem einzigen Objekt mit erlaubten Werten. Jede Funktion gibt eine Bezeichnung zurück, sodass der Auswahlablauf in Node.js ohne ein React-Build-Setup ausgeführt werden kann.

function TextComponent() {
  return "Text content";
}

function VideoComponent() {
  return "Video content";
}

function PictureComponent() {
  return "Picture content";
}

const componentByCategory = {
  text: TextComponent,
  video: VideoComponent,
  picture: PictureComponent
};

const category = "text";

if (Object.hasOwn(componentByCategory, category)) {
  const SelectedComponent = componentByCategory[category];
  console.log(SelectedComponent());
} else {
  console.log("Unsupported category");
}

Text content

In einer React-Komponente verwenden Sie dieselbe Prüfung auf einen eigenen Schlüssel, bevor Sie die Zuordnung lesen, und rendern Sie dann die ausgewählte Referenz mit JSX, zum Beispiel return <SelectedComponent />;. Eine Kategorie wird nur dann unterstützt, wenn sie ein eigener Schlüssel von componentByCategory ist; geerbte Namen wie toString gelangen ebenfalls zum Fallback. Wählen Sie, was die Oberfläche anzeigen soll, etwa eine Fallback-Komponente oder eine Nachricht, anstatt zu versuchen, eine nicht vorhandene Referenz zu rendern. Behalten Sie diese Zuordnung als Liste erlaubter Werte bei: Benutzereingaben dürfen einen ihrer definierten Einträge auswählen, aber sie sollten nicht zu einem beliebigen Komponentennamen oder Importpfad werden.

Das bereitgestellte CodeSandbox-Beispiel kann verwendet werden, um das ursprüngliche Setup mit Text-, Video- und Bildkomponenten zu erkunden. Ersetzen Sie in einer Anwendung die Beispielkategorie durch den vom Benutzer ausgewählten Wert und behalten Sie die explizite Zuordnung und das Fallback-Verhalten bei.