React JS中如何处理大括号内的带连字符属性及img标签引用报错问题

这个问题我碰到过不少次，本质是JavaScript对象属性访问的语法规则问题，我来给你拆解一下解决方案：

为什么会报错？ #

JavaScript里，使用**点语法（.）**访问对象属性时，属性名必须是合法的标识符——简单说就是不能包含连字符、空格，也不能以数字开头。你写的poster.poster-image会被JS错误解析成poster.poster - image，也就是把poster.poster的值减去变量image，但你根本没定义过image变量，自然就抛出image is not defined的错误了。

修复方案 #

这里有两种靠谱的解决方法：

方法1：使用方括号语法（最直接的修复）

当属性名包含特殊字符时，用方括号包裹属性名字符串就能正确访问了。修改后的代码如下：

<img src={poster['poster-image']} alt="poster 1" className="h-28 w-28" />

另外提醒一句：React元素里要写className而不是class，因为class是JavaScript的关键字，这是React初学者常踩的小坑~

方法2：改用驼峰式属性名（更规范的长期方案）

如果你的API是可控的，建议把返回的字段名从poster-image改成驼峰式的posterImage，这样就能用更简洁的点语法访问了：

<img src={poster.posterImage} alt="poster 1" className="h-28 w-28" />

驼峰式命名是JavaScript的主流编码规范，代码可读性和维护性都会更好。

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