React中获取含连字符的JSON数据及属性访问报错求助

嘿，这个坑我之前踩过！在JavaScript（包括React的JSX语法里），当你要访问的对象属性名包含连字符、空格这类特殊字符时，点语法（.）就失效了，得换成方括号语法来访问才行。

为什么会报错？ #

JavaScript里的点语法要求属性名必须是有效的标识符——简单说就是不能有连字符、不能以数字开头、不能是关键字这些。而preview-hq-mp3里的连字符违反了这个规则，浏览器会把它错误解析成items.preview - hq - mp3（把连字符当成减号运算），自然就会抛出报错。

正确的写法 #

把原来的点语法换成方括号，用字符串包裹带连字符的属性名：

<source src={items['preview-hq-mp3']} type="audio/mpeg"></source>

额外小提示 #

如果属性名是通过变量动态获取的，同样得用方括号语法，比如：

const propName = 'preview-hq-mp3';
const audioSrc = items[propName];

这样也能正常拿到对应的值。

内容的提问来源于stack exchange，提问作者Duarte F C Cancela