使用 React 16.8+ 的
我不确定的是如何应用更改到上下文提供程序值中。
1)
2)是否有一种推荐的方式,使用 React hooks,来从子组件更新值,然后触发使用此上下文的任何组件的重新渲染?
useContext
钩子可以很好地工作。你可以创建一个组件,使用该钩子,并利用上下文值而不会出现任何问题。我不确定的是如何应用更改到上下文提供程序值中。
1)
useContext
钩子是否严格是消费上下文值的一种方式?2)是否有一种推荐的方式,使用 React hooks,来从子组件更新值,然后触发使用此上下文的任何组件的重新渲染?
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>
useContext
钩子的唯一价值在于它允许您避免使用Context.Consumer
父级包装组件并通过函数调用将上下文值传递给渲染的子组件,这种说法正确吗? - Randy BurgessuseContext
钩子来消费它,而不是使用你提到过的带有渲染属性的Context.Consumer
。 - Thollevalue
设为这样的对象,每当 Provider 重新渲染时都会重新渲染所有使用它的组件,这样做不会改变原意。 - neurodynamicuseState
钩子将变量传递给提供程序时,如何防止常量重新呈现? - Bombe属性“accountInfo”在类型“{}”上不存在。ts(2339)
。 - Aravin