ReactJS 组件中的常量放置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48759250/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Constant placement in ReactJS Component
提问by Cannon Moyer
Coming from a Java background it would seem to me that the constant below should be defined within the class as an instance variable. However, this doesn't work and if I want to access a variable from different functions than the constant has to be defined outside of the component class. Can someone please explain this reasoning to me? Am I just missing something simple? I got this code from codeacademy.com.
来自 Java 背景，在我看来，下面的常量应该在类中定义为实例变量。但是，这不起作用，如果我想从不同的函数访问变量，则必须在组件类之外定义常量。有人可以向我解释这个推理吗？我只是缺少一些简单的东西吗？我从 codeacademy.com 得到了这个代码。
import React from 'react';
import ReactDOM from 'react-dom';
const redPanda = {
src: 'https://upload.wikimedia.org/wikipedia/commons/b/b2/Endangered_Red_Panda.jpg',
alt: 'Red Panda',
width: '200px'
};
class RedPanda extends React.Component {
render() {
return (
<div>
<h1>Cute Red Panda</h1>
<img
src={redPanda.src}
alt={redPanda.alt}
width={redPanda.width} />
</div>
);
}
}
ReactDOM.render(
<RedPanda />,
document.getElementById('app')
);
回答by Mayank Shukla
When you want to define some constant values like style or image urls then its always better to define that outside of component, it will become global values, and available inside each function/class of that file.
当您想定义一些常量值（如样式或图像 url）时，最好在组件外部定义它，它将成为全局值，并在该文件的每个函数/类中可用。
Another option of defining constants is on class instance itself, but then that variable will be available only inside class, means if yo defined two classes inside same file then one class variable will not be available inside another class.
定义常量的另一种选择是在类实例本身上，但是该变量将仅在类内部可用，这意味着如果您在同一文件中定义了两个类，则一个类变量在另一个类中将不可用。
Like this:
像这样：
class ABC extends React.Component{
constructor(){
super();
this.a = 10;
this.b = 20;
}
render(){
console.log(this.a, this.b);
return (....);
}
}
Note:React classes doesn't have the feature of class level properties, we can only define methods. But if you want to define values then you need to use class transform properties
注意：React 类没有类级别属性的特性，我们只能定义方法。但是如果你想定义值，那么你需要使用类转换属性
回答by Zahid Sumon
Create a constants.js for shared constant variables/objects and export it from there for better maintainability.
为共享常量变量/对象创建一个 constants.js 并从那里导出它以获得更好的可维护性。
export const redPanda = {
src:'https://upload.wikimedia.org/wikipedia/commons/b/b2/Endangered_Red_Panda.jpg',
alt: 'Red Panda',
width: '200px'
};
import React from 'react';
import ReactDOM from 'react-dom';
import { redPanda} from 'path/to/your/constants/file'; //import from your constants.js
class RedPanda extends React.Component {
render() {
return (
<div>
<h1>Cute Red Panda</h1>
<img
src={redPanda.src}
alt={redPanda.alt}
width={redPanda.width} />
</div>
);
}
}
ReactDOM.render(
<RedPanda />,
document.getElementById('app')
);
回答by salman.zare
You can use something like the following:
您可以使用以下内容：
in another class(for example App.js) use the following code:
export const redPanda = {
src: 'https://upload.wikimedia.org/wikipedia/commons/b/b2/Endangered_Red_Panda.jpg',
alt: 'Red Panda',
width: '200px'
};
在另一个类（例如App.js）中使用以下代码：
export const redPanda = {
src: 'https://upload.wikimedia.org/wikipedia/commons/b/b2/Endangered_Red_Panda.jpg',
alt: 'Red Panda',
width: '200px'
};
in your RedPandacomponent use the following:
import {redPanda} from './App';
在您的RedPanda组件中使用以下内容：
import {redPanda} from './App';
The best way is to define all of your global constants in a file and name it something like common.jsor global.jsand import from it inside other components and files.
最好的方法是在一个文件中定义所有全局常量，并将其命名为类似common.js或，global.js然后从它导入到其他组件和文件中。
