Expo React，从导出默认函数应用程序外部使用钩子

Question

我需要世博会和反应挂钩方面的帮助

我需要从应用程序导出外部操作挂钩显示（profil.tsx）。来自常规 JS 函数的最后一个文件 login.js。

有什么方法可以做到这一点或者我需要重组代码吗？

非常感谢您的回答， 如果您需要更多信息来理解问题，请毫不犹豫地写下您需要的内容 多谢！ 保罗

        //profil.tsx
import { ProfileProvider, useProfile } from '../../components/profileContext';

    import abmelden from '../../components/login'
        
        
        export default function App() {
        
            const { display, setDisplay } = useProfile();//besonderer Hook...
        
        
          ...
        
        return (
        
        VIEW
        
        );}

下一个文件

//profileContext.js

import React, { createContext, useContext, useState } from 'react';

const ProfileContext = createContext();

export const useProfile = () => {
  return useContext(ProfileContext);
};

export const ProfileProvider = ({ children }) => {
  const [display, setDisplay] = useState('login');

  return (
    <ProfileContext.Provider value={{ display, setDisplay }}>
      {children}
    </ProfileContext.Provider>
  );
};

下一个文件

//login.js


export default async function abmelden(showMSG = true){

    LOGOUT PROCESS... 
    
    Here I want to acces setDisplay to change the behavior of the Screen in profile.tsx
  
  }

Answer 1

要从 login.js 访问和操作 setDisplay 函数，您可以将 setDisplay 作为参数传递给 abmelden 函数。方法如下：

更新 abmelden 函数以接受 setDisplay：

// login.js
export default async function abmelden(setDisplay, showMSG = true) {
    // LOGOUT PROCESS...
    setDisplay('someNewState'); // Update the state
}

在 App 组件中调用 setDisplay 时将其传递给 abmelden：

// profil.tsx
import abmelden from '../../components/login';

export default function App() {
    const { setDisplay } = useProfile();

    const handleLogout = () => {
        abmelden(setDisplay);
    };

    return <Button onPress={handleLogout} title="Logout" />;
}

这允许login.js 控制显示状态，而无需重构您的应用程序。如果您需要更广泛地访问 setDisplay，请考虑全局状态管理。

查看 redux 文档 以了解全局状态管理。

请参阅与组件之间共享状态相关的react 文档

这与

传递函数来反应组件有关