Wie zeige ich Elemente in React Native with State an und verstecke sie?

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 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 Element, das Sie anzeigen oder ausblenden möchten, und verwenden Sie es bedingtes Rendering, um zu bestimmen, ob das Element sichtbar sein soll oder nicht.
3. Erstellen Sie in der Konstruktormethode Ihrer Komponente eine neue Zustandsvariable, z. B. showElement, und setzen Sie sie auf false.
4. Hinzufügen einen onClick-Ereignishandler für das Element, 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:

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

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

  render() {
    return (
      <div>
        {this.state.showElement && <div>Hello World!</div>}
        <button onClick={this.toggleShowElement}>Toggle</button>
      </div>
    );
  }
}</code>

Dieses Code-Snippet erstellt eine neue React-Komponente namens MyComponent das rendert ein Div mit dem Text „Hello World!“ 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.

Das obige ist der detaillierte Inhalt vonWie zeige ich Elemente in React Native with State an und verstecke sie?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!