React创建常量文件

Question

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

ACTION_INVALID = "This action is invalid!"

并在其他组件中使用它

errorMsg = myConstClass.ACTION_INVALID;

Answer 1

我不完全确定我有你的问题但如果我这样做应该很简单：

根据我的理解，您只想创建一个包含常量的文件，并在另一个文件中使用它。

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;

如果你正在使用反应，你应该有webpack或packager（反应原生），所以你应该有babel，它可以转换你使用导出和导入到旧的js。

Answer 2

您只需为常量创建一个对象：

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

然后使用它。

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

Answer 3

扩展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'以大写字母开头，因为它在代码中就像一个类。）

Answer 4

一种方法（尽管与其他答案没有那么不同）是创建一个裸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)