Languages
[Edit]
DE

React - useState - Verwendungsbeispiele

3 points
Created by:
Nikki
9920

In diesem Artikel wird ein einfaches Beispiel gezeigt, wie man useState-Hook in einer Funktionskomponente in React verwenden.

Das folgende Beispiel zeigt, wie man einen einfachen Z├Ąhler erstellen kann, der bei jedem Anklicken von┬ábutton┬áinkrementiert wird.

In der App-Komponente erstellt man einen┬áuseState-Hook, der den Zustand┬áder Komponente in dem Z├Ąhler speichert.┬áEs ist sehr wichtig, Hooks am Anfang von Komponenten zu verwenden (vor return) - Das ist die Hauptregel in React.┬á
Um den Z├Ąhler zu aktualisieren, verwendet man die Funktion┬ásetCounter, und ├╝bergibt man ┬ácounter + 1┬áals neuen Zustand - das rendert die┬áApp-Komponente mit dem neuen Zustand.┬á

Lauff├Ąhiges Beispiel:

// ONLINE-RUNNER:browser;

//Hinweis: Bei der Arbeit mit dem JSX-Compiler soll man die Importzeilen entkommentieren.
//import React from 'react';

const App = () => {
  const [counter, setCounter] = React.useState(0);
  return (
	<div>
	  <div>Z├Ąhler: {counter}</div>
	  <button onClick={() => setCounter(counter + 1)}>1 hinzuf├╝gen</button>
	</div>
  );
};

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

Beispiel für die Verwendung von useState in untergeordneten Komponenten

Es ist auch m├Âglich, den Zustand innerhalb verschachtelter Komponenten zu erhalten. Das funktionert auf die gleiche Art und Weise - es erfordert die Funktion┬áuseState().

Wie das funktionert sieht man im folgenden Beispiel:

 

// ONLINE-RUNNER:browser;

//Hinweis: Bei der Arbeit mit dem JSX-Compiler soll man die Importzeilen entkommentieren.
//import React from 'react';

const ChildComponent = () => {
  const [counter, setCounter] = React.useState(0);
  return (
	<div>
	  <span>[ChildComponent] Z├Ąhler: {counter}</span>{' '}
	  <button onClick={() => setCounter(counter + 1)}>1 hinzuf├╝gen</button>
	</div>
  );
};

const App = () => {
  const [counter, setCounter] = React.useState(0);
  return (
	<div>
      <div>
        <span>[App] Z├Ąhler: {counter}</span>{' '}
        <button onClick={() => setCounter(counter + 1)}>1 hinzuf├╝gen</button>
      </div>
      <ChildComponent />
	</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