![](/img/trans.png)
[英]React Context and Provider data doesn't get passed down as expected
[英]React Context doesn't work using Provider
我正在簡化嘗試使用React更新上下文的過程 。
我Hello CodeSandbox
我單擊標題Hello CodeSandbox
,顯示加載欄以及context api
數據。
代碼示例: https : //codesandbox.io/s/vyq3r7k4o5
export const LoadingState = {
loading: false
};
const LoadingContext = React.createContext(LoadingState);
export const LoadingProvider = LoadingContext.Provider;
export const LoadingConsumer = LoadingContext.Consumer;
const LinearIndeterminate = function() {
const { loading } = useContext(LoadingContext);
return (
<div>
{loading && <LinearProgress color="secondary" />}
</div>
);
};
class App extends PureComponent {
state = {
loading: false
};
add = () => {
const currentState = this.state.loading;
this.setState({ loading: !currentState });
};
render() {
console.info(this.state);
return (
<div className="App">
<h1 onClick={this.add}>Hello CodeSandbox</h1>
<Loading />
<LoadingProvider value={this.state}>
{this.state.loading}
</LoadingProvider>
<h2>Start editing to see some magic happen!</h2>
</div>
);
}
}
您的Loading
組件應位於App上下文提供程序內部。
工作應用程式: https : //codesandbox.io/s/z6yjl04vjx
class App extends PureComponent {
state = {
loading: false
};
add = () => {
const currentState = this.state.loading;
this.setState({ loading: !currentState });
};
render() {
console.info(this.state);
return (
<div className="App">
<h1 onClick={this.add}>Hello CodeSandbox</h1>
<LoadingProvider value={this.state}>
<Loading /> /* This line is moved. */
</LoadingProvider>
<h2>Start editing to see some magic happen!</h2>
</div>
);
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.