Languages
[Edit]
DE

React - useState - Verwendungsbeispiele

3 points
Created by:
Nikki
10520

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 );
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