Quelle est l'utilisation du contexte en réaction

Dans React, le contexte est utilisé pour partager des données et permet de transmettre des données d'une génération à l'autre ; le contexte fournit une nouvelle façon de partager des données entre les composants sans avoir à transmettre explicitement des accessoires à travers l'arborescence des composants couche par couche, ce qui peut éviter d'utiliser beaucoup de accessoires répétés pour transmettre des valeurs.

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 17.0.1, ordinateur Dell G3.

Quelle est l'utilisation du contexte dans React ?

Le contexte fournit une nouvelle façon de partager des données entre les composants, permettant aux données d'être transmises d'une génération à l'autre sans avoir à transmettre explicitement les accessoires couche par couche à travers l'arborescence des composants.

Context fournit un moyen de partager des valeurs entre les composants sans avoir à transmettre explicitement des accessoires à chaque niveau de l'arborescence des composants. Si les niveaux d'obtention et d'utilisation de la valeur sont éloignés les uns des autres, ou si les composants qui doivent utiliser la valeur sont nombreux et dispersés, vous pouvez utiliser Context pour partager des données et éviter d'utiliser un grand nombre d'accessoires répétés pour transmettre la valeur. Si un seul composant doit utiliser cette valeur, vous pouvez générer le composant à l'emplacement où la valeur est générée, puis utiliser des accessoires pour le transmettre couche par couche à l'emplacement où le composant est réellement affiché.

Utilisation de base

1. Contexte personnalisé

import React from 'react';
 
const ThemeContext = React.createContext('light');
 
export default ThemeContext;

Le code ci-dessus définit un ThemeContext et la valeur par défaut est "light".

2. Utilisez le fournisseur de contexte si nécessaire

import ThemeContext from './context/ThemeContext.js';
import ThemedButton from './ThemedButton.js';
import './App.css';
 
function App() {
  return (
    <ThemeContext.Provider value=&#39;dark&#39;>
      <div className="App">
        <header className="App-header">
          <ThemedButton />
        </header>
      </div>
    </ThemeContext.Provider>
  );
}
 
export default App;

Utilisez le fournisseur de contexte personnalisé sur la couche la plus externe du composant et transmettez la valeur pour écraser la valeur par défaut, puis la valeur de ThemeContext lue par le sous-composant. est « dark » au lieu de la valeur par défaut « light ». Si le fournisseur a une définition de valeur, la valeur de la valeur sera utilisée (même si la valeur n'est pas définie, c'est-à-dire qu'aucune valeur n'est transmise. La valeur par défaut de la définition sera utilisée uniquement lorsque le fournisseur ne fournit pas). il.

3. Définissez le contextType et utilisez la valeur sur le contexte obtenu

import React, { Component } from 'react';
import ThemeContext from "./context/ThemeContext.js";
 
class ThemedButton extends Component {
static contextType = ThemeContext;
render() {
return <button>{this.context}</button>;
}
}
 
export default ThemedButton;

ThemedButton déclare que le contextType est ThemeContext, donc la valeur de this.context est la valeur fournie par le ThemeContext le plus proche, qui est « léger ».

Rendu :

Apprentissage recommandé : "Tutoriel vidéo React"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!