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的答案,适用于您不想一直打字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)