Languages
[Edit]
DE

React - wie kann man ein Element anzeigen oder ausblenden?

3 points
Created by:
Nikki
10100

In diesem Artikel wird gezeigt, wie man Elemente in React anzeigen oder ausblenden kann.

Die Ein-Tasten-Lösung

Im folgenden Beispiel wird eine einfache Lösung mit einer SchaltflÀche gezeigt, die das Element <div>Mein Element</div> anzeigt oder ausblendet. 

Man verwendet React.useState-Hook, um den Zustand des Elements (sichtbar oder versteckt) zu speichern.
StandardmĂ€ĂŸig ist das Element ausgeblendet. Um seine Sichtbarkeit zu Ă€ndern, muss man das negierte visible-Argument an den onClick-Ereignishandler ĂŒbergeben.

Praktisches Beispiel:

// ONLINE-RUNNER:browser;

// Hinweis: Bei der Arbeit mit dem JSX-Compiler soll man die Importzeilen entkommentieren.

// import React from 'react';

const App = () => {
  const [visible, setVisible] = React.useState(false);
  return (
    <div>
      <button onClick={() => setVisible(!visible)}>
        {visible ? 'Ausblenden' : 'Anzeigen'}
      </button>
      {visible && <div>Mein Element</div>}
    </div>
  );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root );

Die Zwei-Tasten-Lösung

Im folgenden Beispiel wird eine Lösung mit zwei separaten SchaltflÀchenkomponenten zum Anzeigen und Ausblenden des Elements <div>Mein Element</div> gezeigt.

Man verwendet React.useState-Hook, um den Zustand des Elements (sichtbar oder versteckt) zu speichern.
StandardmĂ€ĂŸig ist das Element ausgeblendet. Um seine Sichtbarkeit zu Ă€ndern, erstellt man zwei SchaltflĂ€chen, die, wenn sie angeklickt werden, die Funktion setVisible aufrufen, und das Argument visible auf true (um das Element sichtbar zu machen) oder false (um es auszublenden).

Praktisches Beispiel:

// ONLINE-RUNNER:browser;

// import React from 'react';

const App = () => {
  const [visible, setVisible] = React.useState(false);
  return (
    <div>
      <button onClick={() => setVisible(true)}>Anzeigen</button>
      <button onClick={() => setVisible(false)}>Ausblenden</button>
      {visible && <div>Mein Element</div>}
    </div>
  );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root );

ReactJS (DE)

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

â€ïžđŸ’» 🙂

Join