我目前在我的 React 应用程序中有 2 个上下文，我试图从我的第二个上下文中的顶级上下文调用一个方法。

上下文是这样嵌套的:

App.js

function App(props) {

  return (
    <SessionContextProvider>
      <APIContextProvider>
         // I have some components here
      </APIContextProvider>
    </SessionContextProviders>
  )
}

有没有办法在我的 APIContextProvider 中使用 SessionContext？

import { SessionContext } from 'contexts/session'

export const APIContext = createContext();

export default class APIContextProvider extends Component {

    static contextType = SessionContext

    randomMethod() {
        this.context.logoutUser()
    }

    render() {
        return (
            <APIContext.Provider value={{randomMethod: this.randomMethod}}>
                {this.props.children}
            </APIContext.Provider>
        )
    }
}

问题是在我的 APIContext 中运行 randomMethod 时不起作用，因为 this.context 未定义。

这是可行的还是我遗漏了什么？

最佳答案

我为您创建了一个示例，其中 ApiProvider 使用 SessionContext 中的 logoutUser 并提供 randomMethod，它调用函数 logoutUser。

import React, { createContext } from "react";

const SessionContext = createContext();

const SessionProvider = props => {
  const logoutUser = () => {
    alert("Logout user, but fast!");
  };

  return (
    <SessionContext.Provider value={logoutUser}>
      {props.children}
    </SessionContext.Provider>
  );
};

export { SessionContext as default, SessionProvider };

内部上下文

import React, { createContext, useContext } from "react";
import SessionContext from "./SessionContext";

const ApiContext = createContext();

const ApiProvider = props => {
  const logoutUser = useContext(SessionContext);

  const randomMethod = () => {
    logoutUser();
  };

  return (
    <ApiContext.Provider value={{ randomMethod: randomMethod }}>
      {props.children}
    </ApiContext.Provider>
  );
};

export { ApiContext as default, ApiProvider };

App.js

export default function App() {
  return (
    <SessionProvider>
      <ApiProvider>
        <TestComponent />
      </ApiProvider>
    </SessionProvider>
  );
}

https://codesandbox.io/s/late-bush-959st

https://stackoverflow.com/questions/60937389/