React创建常量文件

时间:2016-08-19 10:14:36

标签: javascript reactjs constants

如何创建常量文件,如:key - ReactJs中的值,

ACTION_INVALID = "This action is invalid!"

并在其他组件中使用

errorMsg = myConstClass.ACTION_INVALID;

4 个答案:

答案 0 :(得分:64)

我不完全确定我得到了你的问题但如果我这样做应该很简单:

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

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。

答案 1 :(得分:24)

您可以简单地为常量创建一个对象:

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

然后使用它。

如果要捆绑,则可以export此对象,然后import为每个组件文件。

答案 2 :(得分:13)

扩展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 :(得分:7)

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