从子方法访问 React 上下文 API 的方法

Question

我是React的新手，正在尝试创建上下文API。我读过一些类似的问题，但我找不到答案。

我的上下文提供程序文件：

import React, { Component } from 'react'
const MyContext = React.createContext();
class ContextProvider extends Component {
constructor(props) {
super(props)
this.state = {
isLogin: false
}   
}  
handleLogin = () => {   
this.setState({
isLogin : true
})              
}

render() {
return (    
<MyContext.Provider value={{
...this.state,
handleLogin : this.handleLogin
}}>
{this.props.children}
</MyContext.Provider>
);
}
}
const ContextConsumer = MyContext.Consumer;
export {ContextProvider, ContextConsumer};

用户成功登录后，我需要通过访问ContextProvider.js中的handleLogin((来更改状态：

import React, { Component } from 'react'
import {ContextConsumer} from "./ContextProvider";
class Login extends Component {
onHandleSubmit = () => {
// on submit login success :
// --- how to call handleLogin() in ContextProvider.js here ? ----
}
render() { 
return (
<div> --- not expected here ---- </div>
)
}
} 

顺便说一句，对不起我的英语。

Answer 1

假设Login组件由层次结构中更高级别的ContextProvider封装，则可以通过定义静态contextType来访问类组件内部的上下文。

为此，您需要像一样首先从ContextProvider导出上下文

export {ContextProvider, ContextConsumer, MyContext };

然后像一样使用

import React, { Component } from 'react'
import {MyContext} from "./ContextProvider";
class Login extends Component {
static contextType = MyContext;
onHandleSubmit = () => {
// on submit login success :
this.context.handleLogin();
}
render() { 
return (
<div> {/* render content here */} </div>
)
}
} 

但是，如果您使用的是16.3.0和16.6.0之间的react版本，则需要使用等呈现道具模式传递上下文

class Login extends Component {
onHandleSubmit = () => {
// on submit login success :
this.props.context.handleLogin();
}
render() { 
return (
<div> --- not expected here ---- </div>
)
}
} 
export default (props) => (
<ContextConsumer>
{values=> <Login {...props} context={values} />}
</ContextConsumer>
)