Dynamischer Komponentenname in React

1. Dynamische Komponentennamen und JSX
2. Dynamischer Komponentenname in React

React ist eine der beliebtesten Möglichkeiten zum Erstellen von Benutzeroberflächen. Sie können React verwenden, um sofort auf Benutzeraktionen zu reagieren, z. B. Inhalte dynamisch anzuzeigen und auszublenden, CSS-Stile bedingt anzuwenden und mehr.

In diesem Artikel werden wir über dynamische Komponentennamen in React sprechen.

Dynamische Komponentennamen und JSX

Um zu verstehen, wie man den Namen der gerenderten Komponente in React dynamisch ändert, müssen wir zunächst die Templating-Sprache JSX verstehen.

JSX ist die Standard-Template-Sprache für React. Es ermöglicht React-Entwicklern, deklarativ eine ordentliche Hierarchie von Komponenten zu erstellen.

JSX ermöglicht es Entwicklern, React-Anwendungen schneller zu erstellen, als sie dies mit der React-API der obersten Ebene tun würden.

Es ist wichtig zu verstehen, dass JSX nur eine einfach zu schreibende und zu lesende Syntax ist. Unter der Haube bestehen alle React-Anwendungen aus komplexen Methodenaufrufen in der Top-Level-API von React, wie z. B. createElement(), createFactory(), cloneElement() und mehr.

Dynamischer Komponentenname in React

Angenommen, Sie haben einen Blog und möchten verschiedene Arten von Komponenten dynamisch rendern: Text, Video oder Bild.

Zuerst müssen Sie Komponenten definiert und erstellt haben, bevor Sie sie aufrufen. Sie können sie nicht dynamisch generieren; Sie können jedoch <SomeComponent> deklarativ aufrufen, was je nach dynamischen Werten als unterschiedliche Komponenten interpretiert werden kann.

Das Schreiben von <SomeComponent> in JSX wird in die native API von React als Aufruf der Methode React.createElement(SomeComponent, {}) übersetzt. Das erste Argument für die Methode React.createElement() muss ein HTML-Tag oder eine Funktion sein; Daher muss die Variable SomeComponent entweder auf ein HTML-Element oder eine Komponente verweisen.

Anfänger verwechseln oft den Fehler, den Komponentennamen dynamisch zu generieren und ihn als Zeichenfolge in einer Variablen zu speichern. Das ist falsch, weil das erste Argument der Methode React.createElement() kein einfacher String sein kann.

Das ist zum Beispiel falsch:

var category = "Text";
var SomeComponent = category + "Component";
return <SomeComponent />;

Auf den ersten Blick sollte alles im Code-Snippet funktionieren, aber selbst wenn der String-Wert in Großbuchstaben geschrieben ist, wird dies nicht funktionieren, da die Variable SomeComponent einen String-Wert enthalten wird. Stattdessen muss es sich um eine gültige React-Komponente (oder ein HTML-Tag) handeln.

Richtiger Weg, um einen dynamischen Komponentennamen in React zu haben

Erstellen Sie ein Objekt mit Eigenschaftsnamen für jeden Komponententyp. Der Wert für diese Eigenschaften sollte auf tatsächliche React-Komponenten verweisen.

Dann können Sie eine Variable mit einer dynamisch generierten Zeichenfolge haben und diese Variable verwenden, um auf eine der im Objekt gespeicherten Komponenten zu verweisen.

Schauen wir uns den eigentlichen Code an:

export default function App() {
  const componentNames = {
    text: TextComponent,
    video: VideoComponent,
    picture: PictureComponent
  };
  var category = "text";
  var SomeComponent = componentNames[category];
  return (
    <div className="App">
      <SomeComponent />
    </div>
  );
}

function TextComponent() {
  return (
    <div>
      <h1>I am a dynamically named Text Component</h1>
    </div>
  );
}
function VideoComponent() {
  return (
    <div>
      <h1>I am a dynamically named Video Component</h1>
    </div>
  );
}
function PictureComponent() {
  return (
    <div>
      <h1>I am a dynamically named Picture Component</h1>
    </div>
  );
}

Sie können versuchen, den Code selbst auf CodeSandbox zu bearbeiten.

Hier haben wir ein einfaches Beispiel für eine übergeordnete und drei untergeordnete Komponenten. Technisch gesehen hat der Elternteil nur eine Kindkomponente, aber alle drei Komponenten: TextComponent, VideoComponent und PictureComponent können ihren Platz einnehmen, abhängig vom Wert in der Variable category.

Derzeit ist die Variable category auf text gesetzt; Wir verwenden es, um die entsprechende TextComponent im componentNames-Objekt nachzuschlagen. Sobald wir festgestellt haben, welche Art von Komponente wir benötigen, speichern wir sie in der Variablen SomeComponent.

In unserer App-Komponente rufen wir die SomeComponent-Variable auf, die je nach String-Wert in der category-Variable auf drei verschiedene Komponenten verweisen kann.

Dies ist eine leistungsstarke Funktion, mit der Sie bestimmte Komponenten dynamisch rendern oder nicht rendern können. In diesem Fall haben wir einen statischen Zeichenfolgenwert; Sie können jedoch Benutzereingaben sammeln und verwenden, um zu bestimmen, welche Komponenten gerendert werden müssen und welche übersprungen werden können.