当前位置：首页 > React

React如何定义公共常量

2026-01-24 11:58:03React

定义全局常量

在React项目中，可以通过创建单独的常量文件来存放公共常量。例如创建一个constants.js文件，导出需要共享的常量。

// constants.js
export const API_URL = 'https://api.example.com';
export const MAX_ITEMS = 10;
export const DEFAULT_TIMEOUT = 5000;

使用环境变量

对于敏感信息或环境相关的常量，可以使用.env文件定义环境变量。创建.env文件并定义变量，变量名需要以REACT_APP_开头。

// .env
REACT_APP_API_URL=https://api.example.com
REACT_APP_MAX_ITEMS=10

通过Context共享常量

对于需要在组件树中深层共享的常量，可以使用React Context API创建一个常量上下文。

// ConstantsContext.js
import React from 'react';

const ConstantsContext = React.createContext({
  API_URL: 'https://api.example.com',
  MAX_ITEMS: 10,
});

export default ConstantsContext;

使用Redux管理常量

在大型应用中，可以通过Redux store来管理全局常量，创建一个constants reducer。

// constantsReducer.js
const initialState = {
  API_URL: 'https://api.example.com',
  MAX_ITEMS: 10,
};

export default function constantsReducer(state = initialState) {
  return state;
}

类型化常量(TypeScript)

在使用TypeScript时，可以为常量定义类型，确保类型安全。

React如何定义公共常量

// constants.ts
interface AppConstants {
  API_URL: string;
  MAX_ITEMS: number;
}

export const CONSTANTS: AppConstants = {
  API_URL: 'https://api.example.com',
  MAX_ITEMS: 10,
};