javascript - Correctly create global variables in React - Stack Overflow

admin管理员组

文章数量:1278882

As title. I've searched about this problem on this site but I didn't find a solution for my case. I've defined a global variables in public/static/js/A.js in my Visual Studio project:

var pVariable=new Class1();

There is a function LoadList() in Class1.
That variable will be used in several functions in my project, so I set as a global variable, and I included the JS file to public/index.html in the same project:

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

I use that variable in src/Clsb.js in the same project....

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

When I start debug in Visual Studio , I got an error:Failed to pile: 'pVariable' is not defined no-undef
But I am sure the JS file contains that variable is included. Could someone guide me to fix where I made it wrong?

As title. I've searched about this problem on this site but I didn't find a solution for my case. I've defined a global variables in public/static/js/A.js in my Visual Studio project:

var pVariable=new Class1();

There is a function LoadList() in Class1.
That variable will be used in several functions in my project, so I set as a global variable, and I included the JS file to public/index.html in the same project:

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

I use that variable in src/Clsb.js in the same project....

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

When I start debug in Visual Studio , I got an error:Failed to pile: 'pVariable' is not defined no-undef
But I am sure the JS file contains that variable is included. Could someone guide me to fix where I made it wrong?

• javascript
• reactjs

Share Improve this question Follow asked Jan 7, 2021 at 10:10 Gary LuGary Lu 7311 gold badge22 silver badges1212 bronze badges 2

• 1 no-undef is an ESLint rule - you need to define the globals in your ESLint configuration, so it knows they'll be available. See eslint/docs/user-guide/configuring. – jonrsharpe Commented Jan 7, 2021 at 10:12
• Global variables are generally a bad idea. I don't know React but perhaps values that need to available throughout your code should be available via a service. – phuzi Commented Jan 7, 2021 at 10:13

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

You can do that by storing the variable in window variable

first store the value of your variable in A.js like this

window.pie = 3.1416;

And you can see the variable value in your Clsb.js ponent like

console.log(window.pie);

As phuzi said in the ment to your question, declaring global variables in react is a bad idea, in this case the ideal would be to use redux, or else the context api (context hook) so you can access and make the variable available throughout your system.

Link to docs https://reactjs/docs/context.html

本文标签： javascriptCorrectly create global variables in ReactStack Overflow