Languages
[Edit]
DE

React - wie kann man ein Element anzeigen oder ausblenden?

3 points
Created by:
Nikki
9920

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