如何使用 Context API 访问状态
How to access state with Context API
我在 React 应用程序中使用上下文 API 进行状态管理,我正在寻找一种方法来从我的 Provider class.[=14= 访问无状态函数中的状态]
我熟悉在 render() 中围绕 JSX 包装 Consumer 标签,但在这种情况下,我不会返回任何 JSX
app.js
export default class App extends Component {
render() {
return (
<BrowserRouter>
<Provider>
<Header />
<Switch>
<PrivateRoute path='/test' component={test} />
</Switch>
</Provider>
</BrowserRouter>
);
};
};
/context/index.js(提供商Class)
import React, { Component } from 'react';
import axios from 'axios';
import {withRouter} from 'react-router';
const AuthContext = React.createContext();
class Provider extends Component {
state ={
firstName: '',
lastName:'',
emailAddress: '',
password: '',
signedIn: false,
};
render(){
return (
<AuthContext.Provider value = {{
user: {...this.state},
}}>
{this.props.children}
</AuthContext.Provider>
);
};
};
export default withRouter(Provider);
export const Consumer = AuthContext.Consumer;
PrivateRoute.js
import React from 'react';
import { Route } from 'react-router-dom';
const PrivateRoute = ({ component: Component, ...rest}) => {
<Route {...rest} render = {() => (
/* I NEED TO CHECK IF USER IS SIGNED IN. HOW DO I ACCESS this.state.signedIn from within the Provider class? */
)} />
}
export default PrivateRoute
我正在开发一个在访问路由之前需要身份验证的组件,但首先我需要弄清楚如何将状态从 Provider class 拉入 PrivateRoute.js
您可以将 PrivateRoute
包装在另一个匿名函数中,该函数使用上下文作为渲染道具,并通过像
这样的道具将其传递给 PrivateRoute
import React from 'react';
import { Route } from 'react-router-dom';
const PrivateRoute = ({ component: Component, context, ...rest}) => {
return <Route {...rest} render = {() => (
/* use `context.signedIn` from within the Provider class? */
)} />
}
export default () => <Consumer>{(context) => <PrivateRoute context={context} />}</Consumer>
或者如果你使用的是 v16.8.0 或更高版本的 react,你可以使用 useContext
hook
import React, { useContext } from 'react';
import { Route } from 'react-router-dom';
const PrivateRoute = ({ component: Component, context, ...rest}) => {
const context = useContext(AuthContext);
return <Route {...rest} render = {() => (
/* use `context.signedIn` from within the Provider class? */
)} />
}
我在 React 应用程序中使用上下文 API 进行状态管理,我正在寻找一种方法来从我的 Provider class.[=14= 访问无状态函数中的状态]
我熟悉在 render() 中围绕 JSX 包装 Consumer 标签,但在这种情况下,我不会返回任何 JSX
app.js
export default class App extends Component {
render() {
return (
<BrowserRouter>
<Provider>
<Header />
<Switch>
<PrivateRoute path='/test' component={test} />
</Switch>
</Provider>
</BrowserRouter>
);
};
};
/context/index.js(提供商Class)
import React, { Component } from 'react';
import axios from 'axios';
import {withRouter} from 'react-router';
const AuthContext = React.createContext();
class Provider extends Component {
state ={
firstName: '',
lastName:'',
emailAddress: '',
password: '',
signedIn: false,
};
render(){
return (
<AuthContext.Provider value = {{
user: {...this.state},
}}>
{this.props.children}
</AuthContext.Provider>
);
};
};
export default withRouter(Provider);
export const Consumer = AuthContext.Consumer;
PrivateRoute.js
import React from 'react';
import { Route } from 'react-router-dom';
const PrivateRoute = ({ component: Component, ...rest}) => {
<Route {...rest} render = {() => (
/* I NEED TO CHECK IF USER IS SIGNED IN. HOW DO I ACCESS this.state.signedIn from within the Provider class? */
)} />
}
export default PrivateRoute
我正在开发一个在访问路由之前需要身份验证的组件,但首先我需要弄清楚如何将状态从 Provider class 拉入 PrivateRoute.js
您可以将 PrivateRoute
包装在另一个匿名函数中,该函数使用上下文作为渲染道具,并通过像
import React from 'react';
import { Route } from 'react-router-dom';
const PrivateRoute = ({ component: Component, context, ...rest}) => {
return <Route {...rest} render = {() => (
/* use `context.signedIn` from within the Provider class? */
)} />
}
export default () => <Consumer>{(context) => <PrivateRoute context={context} />}</Consumer>
或者如果你使用的是 v16.8.0 或更高版本的 react,你可以使用 useContext
hook
import React, { useContext } from 'react';
import { Route } from 'react-router-dom';
const PrivateRoute = ({ component: Component, context, ...rest}) => {
const context = useContext(AuthContext);
return <Route {...rest} render = {() => (
/* use `context.signedIn` from within the Provider class? */
)} />
}