javascript - React create constants file - Stack Overflow

admin管理员组

文章数量:1134232

How to create constants file like: key - value in ReactJs,

ACTION_INVALID = "This action is invalid!"

and to use that in other components

errorMsg = myConstClass.ACTION_INVALID;

How to create constants file like: key - value in ReactJs,

ACTION_INVALID = "This action is invalid!"

and to use that in other components

errorMsg = myConstClass.ACTION_INVALID;

• javascript
• reactjs
• constants

Share Improve this question Follow asked Aug 19, 2016 at 10:14 IntoTheDeepIntoTheDeep 4,1181515 gold badges4545 silver badges8686 bronze badges 2

• A global constants? Are you bundling? – Davin Tryon Commented Aug 19, 2016 at 10:20
• I use browsersync for server – IntoTheDeep Commented Aug 19, 2016 at 10:21

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 166

I'm not entirely sure I got your question but if I did it should be quite simple:

From my understanding you just want to create a file with constants and use it in another file.

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;

If you are using react you should have either webpack or packager (for react-native) so you should have babel which can translate your use of export and import to older js.

Expanding on Monad's answer, for situations where you don't want to type myConstClass all the time:

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;

(Also, if Monad's way works better for you, I believe the convention is for 'MyConstClass' to start with a capital letter, since it's acting like a class in code.)

You can simply create an object for your constants:

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

And then use it.

If you are bundling, you can export this object and then import for each component file.

One way to do that (not so different from other answers though) is to create a bare constants.js file and add your constants there.

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

Then you can import it

import ConstantsList from './constants';

and use

console.log(ConstantsList.ACTION_INVALID)

As the name suggests, Object.freeze() freezes objects and stops anyone from changing the values. Please note: if the values are objects themselves they are changeable (unless they are also frozen)

In nodejs enviroment, when using absolute path, there already is deprecated "constants" and it may conflict with yours, so it's better to create either a folder and put your constants there or create a file with name consts.

Your constants should look like that, use Object.freeze so that constants are never changed by a side effect. You should use Object.freeze for every object.

export const ACTION_INVALID = "This action is invalid!"
export const FILE_TYPES = Object.freeze({
  IMAGE: Object.freeze(["JPEG", "PNG"]),
  VIDEO: Object.freeze(["MP4", "M4V", "MOV", "3GP", "3G2", "WMV", "ASF", "AVI", "FLV", "MKV", "WEBM"])
})

Record & Tuple proposal

Thanks to the proposal, it might be possible to do this instead in future.

export const ACTION_INVALID = "This action is invalid!"
export const FILE_TYPES = #{
  IMAGE: #["JPEG", "PNG"],
  VIDEO: #["MP4", "M4V", "MOV", "3GP", "3G2", "WMV", "ASF", "AVI", "FLV", "MKV", "WEBM"]
}

本文标签： javascriptReact create constants fileStack Overflow