如何使用 useContext 更改 Context 的值？

在 React 16.8 + 中使用 useContext钩子效果很好。您可以创建一个组件，使用钩子，并毫无问题地利用上下文值。

我不确定的是如何对上下文提供程序值应用更改。

1) useContext 钩子严格来说是一种消费上下文值的方法吗？

2)有没有一种推荐的方法，使用 React Hook，来更新子组件的值，然后触发任何组件使用 useContext Hook 在此上下文中重新呈现组件？

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>

109304 次浏览
小开
最佳答案

如何使用钩子更新上下文在钩子常见问题解答的 如何避免传递回调？部分中进行了讨论。

传递给 createContext的参数只有在使用 useContext的组件在树的上方没有 Provider的情况下才是默认值。您可以创建一个 Provider来提供 style和 visibility以及切换它们的函数。

例子

const { createContext, useContext, useState } = React;


const ThemeContext = createContext(null);


function Content() {
const { style, visible, toggleStyle, toggleVisible } = useContext(
ThemeContext
);


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


function App() {
const [style, setStyle] = useState("light");
const [visible, setVisible] = useState(true);


function toggleStyle() {
setStyle(style => (style === "light" ? "dark" : "light"));
}
function toggleVisible() {
setVisible(visible => !visible);
}


return (
<ThemeContext.Provider
value=\{\{ style, visible, toggleStyle, toggleVisible }}
>
<Content />
</ThemeContext.Provider>
);
}


ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>


<div id="root"></div>

小开

您可以使用这种方法，无论您有多少嵌套组件，它都会工作得很好。

// 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" });
};

提交答案