Render-Komponente über den onClick-Event-Handler in React

In diesem Artikel werden wir sehen, wie React-Komponenten eingerichtet werden, um Komponenten dynamisch zu rendern, wenn der Benutzer auf eine Schaltfläche klickt.

Rendering-Komponente über den Event-Handler onClick in React

Beim Erstellen von Webanwendungen in React möchten Sie möglicherweise Komponenten basierend auf den Eingaben des Benutzers bedingt rendern. Dies ist möglich, indem die Eingabe des Benutzers in einer Zustandsvariablen gespeichert wird.

Funktionale React-Komponenten geben JSX-Code zurück, mit dem Sie Komponenten basierend auf dem Wert von Zustandsvariablen rendern (oder nicht rendern) können.

Um Komponenten bedingt zu rendern, können Sie diese beiden Funktionen und den ternären JavaScript-Operator verwenden.

Code:

export default function App() {
  const [showComponent, setShowComponent] = useState(true);
  return (
    <div className="App">
      {showComponent ? <Box /> : ""}
      <button onClick={() => setShowComponent(!showComponent)}>
        Hide and show Box
      </button>
    </div>
  );
}

Ausgang:

Live-Demo

Im obigen Snippet haben wir den Haken useState() verwendet, um eine Zustandsvariable showComponent auf true zu initialisieren. Wir erstellen auch eine weitere Variable, setShowComponent, die eine Referenz auf die Funktion speichert, die die Zustandsvariable aktualisiert.

In JSX haben wir einen JavaScript-Ausdruck geschrieben, der die Variable showComponent auswertet und die Komponente <Box /> rendert, wenn sie wahr ist. Wenn nicht, wird ein leerer String gerendert.

Um JavaScript-Ausdrücke in JSX zu schreiben, müssen Sie sie mit geschweiften Klammern ({}) umschließen.

Wir setzen den Event-Handler onClick() so, dass er den Wert der Zustandsvariablen showComponent aktualisiert, wenn jemand auf eine Schaltfläche klickt. Wir setzen den Wert der Zustandsvariablen auf das Gegenteil des aktuellen Werts.

Wenn es im Moment true ist, wird die Box gerendert. Ein Klick auf den Button setzt ihn auf false und die Box wird nicht mehr gerendert.

Beachten Sie, wie sich die Position des DOM-Elements <Button> ändert. Dies liegt daran, dass basierend auf dem Wert der Variablen showComponent die Komponente <Box> (die ein div mit fester Höhe und Breite ist) gerendert (oder nicht gerendert) wird.