web-dev-qa-db-fra.com

React Créer un fichier de constantes

Comment créer un fichier de constantes comme: clé - valeur dans ReactJs,

ACTION_INVALID = "This action is invalid!"

et de l'utiliser dans d'autres composants

errorMsg = myConstClass.ACTION_INVALID;
javascriptreactjsconstants
35
IntoTheDeep

Je ne suis pas tout à fait sûr d'avoir compris votre question, mais si je le faisais, cela devrait être assez simple:

De ma compréhension, vous voulez simplement créer un fichier avec des constantes et l’utiliser dans un autre fichier.

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;

Si vous utilisez react, vous devez avoir soit webpack, soit packager (pour react-native), donc babel doit pouvoir traduire votre utilisation de l’exportation et de l’importation en js plus anciens.

71
Monads are like...

Vous pouvez simplement créer un objet pour vos constantes:

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

Et puis l'utiliser.

Si vous regroupez, vous pouvez export cet objet, puis import pour chaque fichier de composant.

25
Davin Tryon

Développer réponse de Monad , pour les situations dans lesquelles vous ne souhaitez pas taper myConstClass tout le temps:

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;

(En outre, si le comportement de Monad vous convient mieux, je pense que la convention veut que "MyConstClass" commence par une lettre majuscule, car il s'agit d'une classe de code.)

14
Michael Scheper

Une façon de le faire (bien que pas si différent des autres réponses) est de créer un fichier nue constants.js et d’y ajouter vos constantes. Je l'utilise pour les configs

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

Ensuite, vous pouvez en avoir besoin n'importe où

import ConstantsList from './constants';

et utilise

console.log(ConstantsList.ACTION_INVALID)
7
mixdev