web-dev-qa-db-fra.com

Comment changer la valeur du contexte lors de l'utilisation de React Hook of useContext

L'utilisation du hook useContext avec React 16.8+ fonctionne bien. Vous pouvez créer un composant, utiliser le hook et utiliser les valeurs de contexte sans aucun problème.

Ce dont je ne suis pas sûr, c'est comment appliquer les modifications aux valeurs du fournisseur de contexte.

1) Le hook useContext est-il strictement un moyen de consommer les valeurs de contexte?

2) Existe-t-il une méthode recommandée, en utilisant React hooks), pour mettre à jour les valeurs du composant enfant, ce qui déclenchera ensuite un nouveau rendu des composants pour tous les composants utilisant le hook useContext avec ce contexte?

const ThemeContext = React.createContext({
  style: 'light',
  visible: true
});

function Content() {
  const { style, visible } = React.useContext(ThemeContext);

  const handleClick = () => {
    // change the context values to
    // style: 'dark'
    // visible: false
  }

  return (
    <div>
      <p>
        The theme is <em>{style}</em> and state of visibility is 
        <em> {visible.toString()}</em>
      </p>
      <button onClick={handleClick}>Change Theme</button>
    </div>
  )
};

function App() {
  return <Content />
};

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.2/umd/react-dom.production.min.js"></script>
javascriptreactjsreact-hooksreact-context
33
Randy Burgess

Vous pouvez utiliser cette approche, quel que soit le nombre de composants imbriqués dont vous disposez, cela fonctionnera correctement.

// Settings Context - src/context/Settings
import React, { useState } from "react";

const SettingsContext = React.createContext();

const defaultSettings = {
   theme: "light",
};

export const SettingsProvider = ({ children, settings }) => {
   const [currentSettings, setCurrentSettings] = useState(
      settings || defaultSettings
   );

   const saveSettings = (values) => {
     setCurrentSettings(values)
   };

   return (
      <SettingsContext.Provider
         value={{ settings: currentSettings, saveSettings }}
      >
         {children}
      </SettingsContext.Provider>
   );
};

export const SettingsConsumer = SettingsContext.Consumer;

export default SettingsContext;

// Settings Hook - src/hooks/useSettings
import { useContext } from "react";
import SettingsContext from "src/context/SettingsContext";

export default () => {
   const context = useContext(SettingsContext);

   return context;
};

// src/index
ReactDOM.render(
   <SettingsProvider settings={settings}>
         <App />
   </SettingsProvider>,
   document.getElementById("root")

// Any component do you want to toggle the theme from
// Example: src/components/Navbar
const { settings, saveSettings } = useSettings();

const handleToggleTheme = () => {
  saveSettings({theme: "light"});
};
0
mohamed khaled