Elemente mit React Native anzeigen und ausblenden

React bietet mehrere Möglichkeiten, die Sichtbarkeit von Elementen auf einer Seite zu manipulieren. Ein gängiger Ansatz besteht darin, Inline-Stile zum Festlegen der Anzeigeeigenschaft zu verwenden. Diese Methode erfordert jedoch ein Inline-Styling, was unpraktisch sein und die Lesbarkeit des Codes beeinträchtigen kann.

Eine elegantere Lösung ist die Verwendung der React State API. Mit der State API können Sie Daten innerhalb einer React-Komponente definieren und verwalten. Indem Sie den Status einer Komponente ändern, können Sie ein erneutes Rendern auslösen, wodurch die Benutzeroberfläche basierend auf dem neuen Status aktualisiert wird.

So können Sie ein Element auf einer Seite über ein Klickereignis mit ein- oder ausblenden die React State API:

1. Erstellen Sie eine neue React-Komponente, z. B. MyComponent.
2. Rendern Sie in der Rendermethode Ihrer Komponente das von Ihnen verwendete Element anzeigen oder ausblenden möchten, und verwenden Sie bedingtes Rendering, um zu bestimmen, ob das Element sichtbar sein soll oder nicht.
3. Erstellen Sie in der Konstruktormethode Ihrer Komponente eine neue Statusvariable, z. B. showElement, und setzen Sie sie auf „false“. .
4. Fügen Sie einen onClick-Ereignishandler zum Element hinzu, das die Sichtbarkeitsänderung auslöst. Schalten Sie im Ereignishandler die Statusvariable showElement um.
5. Verwenden Sie die Statusvariable showElement in der Rendermethode, um das Element bedingt zu rendern. Wenn showElement true ist, ist das Element sichtbar. Wenn showElement false ist, wird das Element ausgeblendet.

Hier ist ein Beispiel, wie Sie dies implementieren könnten:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showElement: false
    };
  }

  toggleShowElement = () => {
    this.setState((prevState) => ({ showElement: !prevState.showElement }));
  };

  render() {
    return (
      

        {this.state.showElement && 
Hello World!
}
        Toggle
      
    );
  }
}

Dieses Code-Snippet erstellt eine neue React-Komponente namens MyComponent, die ein Div mit dem Text „Hello World!“ rendert. wenn die Statusvariable showElement wahr ist. Es enthält auch eine Schaltfläche, mit der Sie die Sichtbarkeit des „Hello World!“-Fensters umschalten können. Element.