如何在使用useContext的React Hook时更改Context值 [英] How to change Context value while using React Hook of useContext
问题描述
在React 16.8+中使用useContext
钩子可以很好地工作.您可以创建一个组件,使用该钩子并利用上下文值,而不会出现任何问题.
Using the useContext
hook with React 16.8+ works well. You can create a component, use the hook, and utilize the context values without any issues.
我不确定的是如何将更改应用于Context Provider值.
What I'm not certain about is how to apply changes to the Context Provider values.
1)useContext钩子严格来说是一种使用上下文值的方法吗?
1) Is the useContext hook strictly a means of consuming the context values?
2)是否有推荐的方法,使用React钩子来更新子组件中的值,然后使用useContext
钩子在此上下文中触发子组件的组件重新渲染?
2) Is there a recommended way, using React hooks, to update values from the child component, which will then trigger component re-rendering for any components using the useContext
hook with this context?
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>
推荐答案
How to update context with hooks is discussed in the How to avoid passing callbacks down? part of the Hooks FAQ.
仅当使用useContext
的组件上方没有Provider
时,传递给createContext
的参数才是默认值.您可以改为创建一个提供style
和visibility
以及切换它们的功能的Provider
.
The argument passed to createContext
will only be the default value if the component that uses useContext
has no Provider
above it further up the tree. You could instead create a Provider
that supplies the style
and visibility
as well as functions to toggle them.
示例
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>
这篇关于如何在使用useContext的React Hook时更改Context值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!