在React/JavaScript中如何引用名称带有'-'的对象属性？

JavaScript 中属性名包含特殊字符（如-、空格、特殊符号）时，只能通过方括号属性访问器引用，语法规则为对象['属性名']，在 React 及 JSX 中该规则同样生效。

正确写法示例 #

1. 普通逻辑中访问

// 假设你的目标对象名为bill
const amount = bill['total-fees']

2. JSX 中直接渲染

<p>总费用：{bill['total-fees']}</p>

常见错误说明 #

• 直接使用点运算符加属性名：bill.total-fees，JS 会将-识别为减法运算符，触发语法报错
• 替换为驼峰命名访问：bill.totalFees，和实际属性名不匹配，会返回undefined
• 点运算符加引号：bill.'total-fees'，不符合 JS 语法规范，直接报错

如果使用方括号语法仍无法正常获取值，可通过以下代码调试确认属性是否真实存在：

// 打印完整对象、所有可枚举属性名，确认属性拼写
console.log('完整对象', yourObject)
console.log('所有属性名', Object.keys(yourObject))

内容的提问来源于stack exchange，提问作者DaveZ