React JSX中style属性无法识别图像的object-fit属性。

Question

我使用的是Bootstrap卡片，需要设置所有卡片中的图像具有相同的大小。虽然有多种方法可以实现相同的效果，但我正在使用此样式来实现相同的效果。

请查看下面的图像样式

<div className="card " style={{width: "18rem"}}>
    <img src={imageUrl} className="card-img-top" style={{width: "100%", height: "40vh", object-fit: contain}} alt="..."/>
    <div className="card-body">
        <h5 className="card-title">{title}...</h5>
        <p className="card-text">{description}...</p>
        <a href={newsUrl} target="_blank" className="btn btn-sm rounded-pill btn-primary">Read More</a>
    </div>
</div>

然而我遇到了错误

SyntaxError：C:\Users\hpoddar\Desktop\WebDev\ReactComplete\newsapp\src\components\NewsItem.js: 非法符号，期望“，”(10:110)

如果我移除object-fit属性，一切正常并且效果如预期。那么这个波浪线会消失。

我该如何解决这个问题呢？

Bootstrap version : 5.1
react: 17.0.2
react-dom: 17.0.2
react-scripts: 4.0.3
web-vitals: 1.1.2

编辑： 我曾经怀疑为什么要使用objectFit，而不是object-fit，这一点在Andrew的评论中得到了解答。

由于内联CSS是以JavaScript对象的形式编写的，因此具有两个名称的属性（例如background-color）必须以驼峰命名法语法编写：

- Himanshuman

Answer 1

我认为对于JSX来说，object-fit: contain 不正确。请尝试使用 objectFit: 'contain'

- Andrew F

---

但是，当我使用原始的CSS object-fit: contain 时，它对我有效，为什么在JSX中我需要像这样使用它 objectFit: 'cover'/contain。我该如何知道发生了哪些变化，是否有任何文件或博客提到了相同的问题？ - Himanshuman

官方文档：https://reactjs.org/docs/introducing-jsx.html。警告：由于JSX更接近于JavaScript而不是HTML，因此React DOM使用camelCase属性命名约定而不是HTML属性名称。例如，在JSX中，class变成了className，tabindex变成了tabIndex。 - Andrew F

只是类比而已。所有的烤肉串命名法都必须转换为驼峰命名法。 - Andrew F