当前位置：首页 > React

react如何定义常量

2026-03-31 06:44:37React

在 React 中定义常量

在 React 中定义常量通常遵循 JavaScript 的标准方式，但可以根据使用场景选择不同的组织方式。

在组件内部定义常量

常量可以在组件函数或类内部直接定义，使用 const 关键字：

function MyComponent() {
  const MAX_ITEMS = 10;
  const API_URL = 'https://api.example.com';

  return <div>Max items: {MAX_ITEMS}</div>;
}

在组件外部定义常量

对于跨组件共享的常量，可以在组件文件顶部或单独文件中定义：

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

// 组件中引入
import { MAX_ITEMS, API_URL } from './constants';

function MyComponent() {
  return <div>Max items: {MAX_ITEMS}</div>;
}

使用环境变量

对于敏感或环境相关的常量，可以使用环境变量：

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

// 组件中访问
function MyComponent() {
  return <div>API URL: {process.env.REACT_APP_API_URL}</div>;
}

枚举类型常量

对于一组相关常量，可以使用对象模拟枚举：

const STATUS = {
  LOADING: 'loading',
  SUCCESS: 'success',
  ERROR: 'error'
};

function MyComponent() {
  const [status, setStatus] = useState(STATUS.LOADING);
  // ...
}

TypeScript 中的常量定义

使用 TypeScript 时可以为常量添加类型：

react如何定义常量

const MAX_ITEMS: number = 10;
const API_URL: string = 'https://api.example.com';

// 或使用枚举
enum Status {
  Loading = 'loading',
  Success = 'success',
  Error = 'error'
}

选择常量定义方式时应考虑其作用域和复用性，组件内部使用的常量可以定义在组件内，跨组件共享的常量建议提取到单独文件中。