React 创建常量文件

IT技术 javascript reactjs constants
2021-04-29 08:28:23

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

ACTION_INVALID = "This action is invalid!"

并在其他组件中使用它

errorMsg = myConstClass.ACTION_INVALID;
4个回答

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

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

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。

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

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

然后使用它。

如果你是捆绑的,你可以把export这个对象然后import为每个组件文件。

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

一种方法(尽管与其他答案没有太大区别)是创建一个裸的 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() 会冻结对象并阻止任何人更改值。请注意:如果值是对象本身,它们是可变的(除非它们也被冻结)