Languages
[Edit]
DE

React - wie kann man ein Element anzeigen oder ausblenden?

3 points
Created by:
Nikki
10520

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 );
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.

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