react字段中有横线如何取值

处理带横线的 React 字段取值

在 React 中，若字段名包含横线（如 user-name），直接通过点运算符（.）访问会报错，因为横线在 JavaScript 中被解析为减号。以下是几种解决方法：

使用方括号访问属性 通过对象方括号语法可以动态访问字段名：

const data = { 'user-name': 'Alice' };
const userName = data['user-name']; // 正确取值

转换为驼峰命名 若数据可控，建议后端返回驼峰命名字段（如 userName），或在前端转换：

const rawData = { 'user-name': 'Bob' };
const formattedData = {
  userName: rawData['user-name']
};

处理 API 响应数据 从 API 获取数据时，可在处理阶段统一转换字段名：

fetch('/api/user')
  .then(response => response.json())
  .then(data => ({
    userName: data['user-name']
  }));

TypeScript 类型定义 若使用 TypeScript，需通过字符串字面量类型定义带横线的字段：

interface User {
  'user-name': string;
}
const user: User = { 'user-name': 'Charlie' };
const name = user['user-name'];

注意事项

• 方括号语法是直接解决方案，但长期维护建议统一命名规范。
• 若字段名动态生成，需确保方括号内的表达式计算结果正确：

  const field = 'user-name';
  const value = data[field]; // 动态访问