Использование контекста в другом контексте в React

Question

В настоящее время у меня есть 2 контекста в приложении React, и я пытался вызвать метод из контекста верхнего уровня в моем втором контексте.

Вот как вложен контекст:

App. js

function App(props) {

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

есть ли способ использовать SessionContext в моем APIContextProvider?

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>
        )
    }
}

Проблема в том, что при запуске randomMethod в моем APIContext не работает потому что this.context не определен.

Это возможно или я что-то упустил?

Answer 1

Конечно, вы можете сделать это, но сначала решите, хотите ли вы создавать новые компоненты, используя Component и наследование или используя функциональные компоненты и Hook API. В настоящее время вы смешиваете оба.

Я создал для вас пример, где ApiProvider использует logoutUser из SessionContext и предоставляет 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