编辑： 随着 v16.8.0中 引入react-hooks
，您可以通过使用
useContext钩子在功能组件中使用上下文
const Users = () => { const contextValue = useContext(UserContext); // rest logic here}编辑： 从版本 16.6.0 起。您可以通过使用上下文的生命周期的方法
this.context一样
class Users extends React.Component { componentDidMount() { let value = this.context; } componentDidUpdate() { let value = this.context; } componentWillUnmount() { let value = this.context; } render() { let value = this.context; }}Users.contextType = UserContext; // This part is important to access context values在版本16.6.0之前，您可以按以下方式进行操作
为了在您的生命周期方法中使用Context，您可以将组件编写为
class Users extends React.Component { componentDidMount(){ this.props.getUsers(); } render(){ const { users } = this.props; return( <h1>Users</h1> <ul> {users.map(user) => ( <li>{user.name}</li> )} </ul> ) }}export default props => ( <UserContext.Consumer> {({users, getUsers}) => {return <Users {...props} users={users} getUsers={getUsers} /> }} </UserContext.Consumer>)通常，您将在您的应用程序中维护一个上下文，将上述登录名打包在HOC中以便重新使用是有意义的。你可以这样写
import UserContext from 'path/to/UserContext';const withUserContext = Component => { return props => { return ( <UserContext.Consumer> {({users, getUsers}) => { return <Component {...props} users={users} getUsers={getUsers} />; }} </UserContext.Consumer> ); };};然后你可以像这样使用它
export default withUserContext(User);
