React：如何從 Context 的方法返回值

Question

我想從我的上下文中的方法返回 boolean 值，我該怎么做？ 我的做法顯然是不正確的。 作為初學者，我經常對在哪里使用哪種語法感到困惑。

這是我的上下文提供者：

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

這就是我想使用 boolean 的地方（參見 if 語句）：

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鈎子，它可以讓您讀取上下文並訂閱其更改。

在這種情況下，您有興趣從上下文中提取 function isAuthenticated並在Route的 render prop 中使用它：

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,
              },
            }}
          />
        )
      }
    />
  );
};