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]; // 动态访问
