Languages
[Edit]
DE

React - useState - Verwendungsbeispiele

3 points
Created by:
Nikki
10460

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