React 创建常量文件答案

【问题标题】：React create constants fileReact 创建常量文件
【发布时间】：2016-12-26 11:05:39
【问题描述】：

如何创建常量文件，例如：ReactJs 中的键-值，

ACTION_INVALID = "This action is invalid!"

并在其他组件中使用它

errorMsg = myConstClass.ACTION_INVALID;

【问题讨论】：

一个全局常量？你在捆绑吗？
我使用 browsersync 作为服务器

标签： javascript reactjs constants

【解决方案1】：

做到这一点的一种方法（虽然与其他答案没有太大区别）是创建一个裸的 constants.js 文件并在那里添加您的常量。

module.exports = Object.freeze({
  ACTION_INVALID: 'This action is invalid',
  ACTION_VALID: 'Some other action',
});

然后就可以导入了

import ConstantsList from './constants';

并使用

console.log(ConstantsList.ACTION_INVALID)

顾名思义，Object.freeze() 冻结对象并阻止任何人更改值。请注意：如果值本身是对象，则它们是可变的（除非它们也被冻结）

【讨论】：

【解决方案2】：

扩展 Monad's answer，适用于您不想一直输入 myConstClass 的情况：

fileWithConstants.js：

export const ACTION_INVALID = "This action is invalid!"
export const CONSTANT_NUMBER_1 = 'hello I am a constant';
export const CONSTANT_NUMBER_2 = 'hello I am also a constant';

fileThatUsesConstants.js：

import { ACTION_INVALID } from 'path/to/fileWithConstants';

const errorMsg = ACTION_INVALID;

（另外，如果 Monad 的方式更适合您，我相信约定是“MyConstClass”以大写字母开头，因为它在代码中就像一个类。）

【讨论】：

【解决方案3】：

我不完全确定我得到了你的问题，但如果我做到了，那应该很简单：

据我了解，您只想创建一个带有常量的文件并在另一个文件中使用它。

fileWithConstants.js：

export const ACTION_INVALID = "This action is invalid!"
export const CONSTANT_NUMBER_1 = 'hello I am a constant';
export const CONSTANT_NUMBER_2 = 'hello I am also a constant';

fileThatUsesConstants.js：

import * as myConstClass from 'path/to/fileWithConstants';

const errorMsg = myConstClass.ACTION_INVALID;

如果你使用 react，你应该有 webpack 或 packager（对于 react-native），所以你应该有 babel，它可以将你对导出和导入的使用转换为旧 js。

【讨论】：

export const 无效
什么意思？我假设您使用旧版本的 js，在这种情况下尝试使用 export.ACTION_INVALID 而不是 export const 并使用 require('path/to/fileWithConstants').ACTION_INVALID 而不是 import。
events.js:160 throw er; // Unhandled 'error' event ^ SyntaxError: D:/constants.jsx: Unexpected token (2:11) class Constants extends React.Component{ export const ACTION_INVALID = "This action is invalid!" export const CONSTANT_NUMBER_1 = 'hello I am a constant'; export const CONSTANT_NUMBER_2 = 'hello I am also a constant'; }
@justColbs 关于export default 和export 的区别。如果您想使用导出默认值，请执行以下操作：export default {CONSTANT_NUMBER_1: 'hello I am a constant', CONSTANT_NUMBER_2: 'hello I am also a constant'} 在这里，我创建了一个具有 2 个不同字段的对象，这些字段代表常量。要使用它，您可以：import whateverNameYouWant from 'path/to/fileWithConstants'
@justColbs：如果您不想一直输入myConstClass（按照惯例，我很确定无论如何都应该使用大写字母“M”），请参阅此答案：stackoverflow.com/a/46815846/1450294

【解决方案4】：

你可以简单地为你的常量创建一个对象：

const myConstClass = {
    ACTION_INVALID: "This action is invalid!"
}

然后使用它。

如果你在捆绑，你可以export这个对象，然后import为每个组件文件。

【讨论】：

但是这样，您仍然可以更改这些值。您只是无法更改 myConstClass 指向的对象。