Реагируйте: Как вернуть значение из метода Context

Question

Я хочу вернуть логическое значение из метода в моем контексте, как бы я это сделал? Мой подход явно не верен. Как новичок, я часто путаюсь, какой синтаксис использовать где.

Это мой ContextProvider:

import React, { Component } from 'react';
import AuthContext from './AuthContext';

// Then create a provider Component to update children Components once the user role changes
class AuthProvider extends Component {
    constructor() {
      super()
      this.state = {
          role: "none" //roles: none, admin, kursleiter
      }
  }

  render() {
    return (
      <AuthContext.Provider value={{
        state: this.state,
        isAuthenticated: () => {
          if (this.state.role == "kursleiter" || this.state.role == "admin") {
            return true
          }
          return false},
        setRole: (newRole) => this.setState({
            role: newRole
        })
      }}>
        {this.props.children}
      </AuthContext.Provider>
    )
  }
}

export default AuthProvider

И именно здесь я хочу использовать мой логический (см. If-Statement):

import React from "react";
import { Route, Redirect } from "react-router-dom";
import AuthContext from '../../AuthContext';

export const ProtectedRoute = ({ component: Component, ...rest }) => {
    return (
    <Route
      {...rest}
      render={props => {
        if (
            <AuthContext.Consumer>
                {(context) => (
                  <React.Fragment>
                    { context.isAuthenticated() == true ? true : null}
                  </React.Fragment>
                )}
            </AuthContext.Consumer>
        ) {
          return <Component {...props} />;
        } else {
          return (
            <Redirect
              to={{
                pathname: "/",
                state: {
                  from: props.location
                }
              }}
            />
          );
        }
      }}
    />
  );
};

Answer 1

Один из способов сделать это - использовать useContext ловушку, которая позволяет вам читать контекст и подписываться на его изменения.

В этом случае вы заинтересованы в извлечении функции isAuthenticated изконтекст и использование его внутри рендера опоры Route:

export const ProtectedRoute = ({ component: Component, ...rest }) => {
  const { isAuthenticated } = useContext(AuthContext);

  return (
    <Route
      {...rest}
      render={(props) =>
        isAuthenticated() ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{
              pathname: "/",
              state: {
                from: props.location,
              },
            }}
          />
        )
      }
    />
  );
};