React：如何从 Context 的方法中获取 return 值

Question

我想 return 从我的 Context 中的方法获取一个布尔值，我该怎么做？我的做法显然是不正确的。作为初学者，我经常对在何处使用哪种语法感到困惑。

这是我的 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 语句）：

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

React：如何从 Context 的方法中获取 return 值

React: How to return value from method of Context

reactjs

react-context