Javascript 有没有办法从React组件导出变量？

是否有一种方法可以从React组件导出变量，以便在自定义挂钩中使用它

代码如下所示：-

function App()
{
    const SignIn=()=>{
        //Some code here

        var userId = data.info.username;
        //Some code here
    }
    return(
        <div className='App'>
        ....
        </div>
    )
}

函数应用程序（）
{
常量符号=（）=>{
//这里有一些代码
var userId=data.info.username；
//这里有一些代码
}
返回(
....
)
}

我需要在其他文件中使用userId。有什么办法吗

localStorage.setItem('userId',data.info.username);

并获取数据

const userId = localStorage.getItem("userId");

还可以阅读关于redux和redux persist的内容
您可以使用createcontext（）-

在App.js中

import UserDetails from "./userDetails"
function App()
{
    const SignIn=()=>{
        //Some code here

        var userId = data.info.username;
        //Some code here
    }
    return(
       <UserDetails.provider value={{user:userId}}>
        <div className='App'>
        ....
        </div>
        </UserDetails.provider>
    )
}

---

“数据”从何而来？API调用的结果？请将其放入redux中。数据来自API调用，因此您必须在更高级别执行API调用，或调用setter函数（由props接收）以更新全局存储。反应状态或任何状态管理库对此都可以。在React中，您不能按照上面设计代码的方式工作：组件的本地属性留在组件内部，或者通过子组件传递。作者要求在两个不同的组件中共享数据，他可能做得不对。在这里建议使用本地存储是一种反模式。那么，如果您刷新网站其他部分的页面，并且丢失登录信息，该怎么办？当我们谈论诸如userId或JWT令牌之类的登录信息时，您需要将其存储在某个地方。LocalStorage或仅HTTP的Cookies，即使非常不安全也不是反模式的，适合于测试切换到更安全的变体。在每次刷新时都会丢失一个短暂的解决方案，这将使在前端工作成为一场噩梦。作者并不是说在页面重新加载时保持持久状态，也不是说JWT令牌或任何类似的东西。他问“如何将数据从一个组件传递到另一个组件”，你的asnwer似乎建议“使用本地存储”。。。这不是我们要走的路。

import UserDetails from "./userDetails"
function App()
{
    const SignIn=()=>{
        //Some code here

        var userId = data.info.username;
        //Some code here
    }
    return(
       <UserDetails.provider value={{user:userId}}>
        <div className='App'>
        ....
        </div>
        </UserDetails.provider>
    )
}

import { useContext } from "react";
import UserDetails from "./userDetails"
  const userIdFetch = useContext(UserDetails);
  console.log(userIdFetch.user) //u will get user id