我想style="background-image: url(foo.jpg); background-image: -webkit-image-set(url(foo_1x.jpg) 1x, url(foo_2x.jpg) 2x)"在 React 组件中做等效的事情。
React 要求我提供一个样式对象，而不是一个字符串。但是一个 JS 对象不能有两次相同的属性。
我如何获得两个background-image属性？此外，顺序很重要——图像集需要在最后。
它需要是内联样式。（因为 URL 是从 DB 中检索到的动态内插值。）
我想我最初误解了你的问题。似乎您正在寻找创建一个样式对象作为props传递给组件。您可以将背景图像组合成一个逗号分隔的列表。您可以使用字符串模板在运行时注入动态图像 url。
const style = {
backgroundImage: `url(${url1}),-webkit-image-set(url(${url2}) 1x, url(${url3}) 2x)`,
};
GitHub 上的“spassvogel”有一个使用 CSS 变量的巧妙解决方案：https : //github.com/facebook/react/issues/20757#issuecomment-776191029
这个想法是在style属性中设置 CSS 变量，比如
style={ "--url1": "url(1.jpg)", "--url2": "url(2.jpg)" }
然后从外部样式表中使用它们，例如
background-image: var(--url1);
等等。
事实证明，这仍然不足以解决我想要的所有问题——这个兔子洞越来越深——但这不是 React 的错，所以我认为这是一个有效的答案。