Question

我已经将类转换为函数，但是“上下文”显示为未定义。我希望使用createContext（）从文件中获取登录变量（令牌，用户ID等）。

在React文档中，函数中没有contextType的示例。它还将其列为“ Class.contextType”，这表明它仅适用于类。除了转换为课程外，还有其他解决方法吗？

// Importing module
import AuthContext from "../context/auth-context";

// Bottom of page:
export default AuthNew;
AuthNew.contextType = AuthContext;

// Snippet of code calling for this context
.then(resData => {
        if (resData.data.login.token) {
          context.login(
            resData.data.login.token,
            resData.data.login.userId,
            resData.data.login.tokenExpiration
          );
        }
      })

预期结果应获取这些createContext（）变量，以便我的应用程序可以登录。

Answer 1

contextType仅适用于类组件。但是，如果要使用上下文作为功能组件，并且使用的是React的 16.8.0 版本或更高版本，则可以使用useContext钩子

const AuthNew = () => {
   const context = useContext(AuthContext)
   ...
}
export default AuthNew;

但是，如果您使用的是较低版本，则可以使用render prop API。

export default (props) => {
   return <AuthContext.Consumer>
      {(context) => <AuthNew {...props} context={context} />}
   </AuthContext.Consumer>
}

并将其用于props.context

之类的组件中

在React Function组件中未定义contextType

1 个答案: