在React中正确创建全局变量

admin

作为标题。我已经在这个网站上搜索过这个问题，但我没有找到我的案例的解决方案。我在Visual Studio项目中的public/static/js/A.js中定义了一个全局变量：

代码语言：javascript


AI代码解释

var pVariable=new Class1();

Class1中有一个函数LoadList()。

该变量将在我的项目的多个函数中使用，因此我将其设置为全局变量，并将JS文件包含到同一项目中的public/index.html中：

代码语言：javascript


AI代码解释

<script type="text/javascript" src="%PUBLIC_URL%/static/js/A.js"></script>

我在同一个项目中的src/Clsb.js中使用了这个变量...

代码语言：javascript


AI代码解释

var alist=pVariable.LoadList();export default class Clsb extends Component{    render(){        return (<Table dataSource={alist} />);    }}

当我在Visual Studio中启动调试时，我得到一个错误:编译失败：'pVariable‘is not defined no-undef

但我确信JS文件中包含该变量。有没有人能指导我改正我哪里错了？

javascript

reactjs

广告

WorkBuddy 个人专业版限时双倍积分

订阅即享双倍积分到账，年付更划算立省696元

立即升级



关注问题分享EN



Stack Overflow用户

发布于 2021-01-07 18:49:40

正如phuzi在对你的问题的评论中所说的那样，在react中声明全局变量是一个坏主意，在这种情况下，理想的做法是使用redux，或者使用上下文api (上下文挂钩)，这样你就可以访问并使变量在整个系统中可用。

链接到文档https://reactjs.org/docs/context.html

具有功能组件的上下文

让我们创建一个类似于钩子的上下文

/src/context.js

代码语言：javascript


AI代码解释

import React, { createContext, useState, useContext} from "react";const UserContext = createContext();export default function UserProvider({ children }) {//your variables//exampleconst [person, setPerson] = useState('John');    return (        <UserContext.Provider            value={{                person //variables to export            }}        >            {children}        </UserContext.Provider>    );}export function useUser() {    const context = useContext(UserContext);        if (!context) throw new Error("useUser must be used within a CountProvider");    const { person } = context;    return { person };}

创建上下文后，您需要在应用程序周围放置提供者

index.js

代码语言：javascript


AI代码解释

import React from "react";import ReactDOM from "react-dom";import App from "./App";import UserProvider from "./src/context.js";ReactDOM.render(    <UserProvider>        <React.StrictMode>            <App />        </React.StrictMode>    </UserProvider>,    document.getElementById("root"));

拥有提供程序后，您可以访问任何文件

src/page.js

代码语言：javascript


AI代码解释

import React from "react";import { useUser } from "./context.js";const Page = (props) => {const { getPerson } = useUser(); //variable available by context