在 React 中使用另一个上下文中的上下文

Question

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

以下是上下文的嵌套方式：

应用程序.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 未定义。

这是可行的还是我错过了什么？

Answer 1

我为您创建了一个示例，其中ApiProvider使用logoutUserfromSessionContext和providing 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 };

应用程序.js

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

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