web-dev-qa-db-ja.com

React定数ファイルの作成

次のような定数ファイルを作成する方法：キー-ReactJsの値、

ACTION_INVALID = "This action is invalid!"

他のコンポーネントでそれを使用する

errorMsg = myConstClass.ACTION_INVALID;
javascriptreactjsconstants
35
IntoTheDeep

私はあなたの質問を受け取ったかどうか完全にはわかりませんが、もし私がそれをしたならば、それは非常に簡単なはずです：

私の理解では、定数を使用してファイルを作成し、別のファイルで使用するだけです。

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用）が必要です。したがって、エクスポートとインポートの使用を古いjsに変換できるbabelが必要です。

71
Monads are like...

定数のオブジェクトを簡単に作成できます。

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

そしてそれを使用します。

バンドルしている場合は、このオブジェクトをexportしてから、各コンポーネントファイルでimportを使用できます。

25
Davin Tryon

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'は大文字で始まることだと思います。）

14
Michael Scheper

それを行う1つの方法（ただし、他の回答とそれほど変わらない）は、bare 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)
7
mixdev