如何在类组件中使用 React.useContext(AuthContext) 来触发 index.js 文件中的条件集

Posted 2023-04-14

【中文标题】如何在类组件中使用 React.useContext(AuthContext) 来触发 index.js 文件中的条件集

【英文标题】：How to use React.useContext(AuthContext) inside a class component to trigger a condition set in index.js file

【发布时间】：2021-06-24 22:31:43

【问题描述】：

我的项目文件代码sn-ps如下 索引.js

import  AuthContext  from './components/context';
const Drawer = createDrawerNavigator();
export default function App() 

  const [isLoading, setIsLoading] = useState(true);
  const [userFound, setUserFound] = useState(false);
   
  
  const authContext=React.useMemo(()=>(     
    skipOn:async() =>      
     setSkip(true);
    
    ,
    skipOff:async()=>
      setSkip(false);
    
  ),[])

 
  return (


    <AuthContext.Provider value=authContext>
    <NavigationContainer >
       (userFound || skip) ? (<Drawer.Navigator
        drawerContent=props => <DrawerContent ...props />
        headerMode='none'
        screenOptions=
          header: () => (null)
        >
        <Drawer.Screen name="HomeDrawer" component=HomeStackScreen />
        <Drawer.Screen name="OfferDrawer" component=OfferStackScreen />

      </Drawer.Navigator>) : <LoginStackScreen/>

    </NavigationContainer>
    </AuthContext.Provider>

  );

当用户尝试登录时，如果他选择跳过该过程，他将触发skipOn()方法。 skipOff() 将使用户回到登录屏幕。我想在按下按钮时访问 HomeStackScreen 组件中的 skipOff。下面是代码 sn-p。如何访问类组件内的authcontext

class CardItemDetails extends Component 

  constructor(props) 
    super(props)

    this.state = 
      isFavorite: false,
      item:  isLoading: true, errMess: null, item: null, discount: null 
    
  
  orderNowHandler = () => 
    if (currentuser is authenticated) 
      
           navigate to another screen
    
    else 
      trigger skipOff() and land on login page
  

我在尝试调用 skipOff() 时总是遇到无效的挂钩调用异常。调用/实现此场景的正确方法是什么？

【问题讨论】：

如果我的回答有用，请点击它左侧的点赞按钮 (▲)。如果它回答了您的问题，请单击复选标记 (✓) 接受它（一旦系统允许）。这样其他人就知道你已经（充分地）得到了帮助。另见What should I do when someone answers my question?

【参考方案1】：

要使用 class 组件内的上下文，您可以分配一个contextType 来读取当前上下文。使用contextType 可以让您使用this.context 使用该上下文类型的最接近的当前值。您可以在包括渲染函数在内的任何生命周期方法中引用它。

所以，你可以写：

import  AuthContext  from './components/context';

class CardItemDetails extends Component 
  static contextType = AuthContext // assign static contextType
  constructor(props) 
    super(props)
    this.state =  ...code here... 
  

  orderNowHandler = (e) => 
    if (writeYourConditionHere) 
      this.context.skipOn() // consume the context values or functions
     else 
      this.context.skipOff()
    
  

另外，请参阅钩子 useContext，它可以让您在 function 组件中使用上下文值。

PS：你不能在类组件中使用React.useContext(AuthContext)，因为hooks（这里是useContext）只能在函数组件中使用。