React实现前后对比图片滑块时遇`style` prop映射错误求助

错误原因 #

你遇到的style prop expects a mapping from style properties to values错误，核心原因是React的style属性要求传入JS对象，而非HTML里的字符串格式；另外React中不能使用class属性定义类名，必须替换为className。

具体修改方案 #

针对你提供的SVG代码，只需做两处关键调整：

• 把所有class替换为className（React定义元素类名的标准属性）
• 将style的字符串格式转为JS对象格式：比如style="fill:rgb(24,24,62)"要改成style={{ fill: 'rgb(24,24,62)' }}

修改后的完整代码 #

<div className="scroller scroller-top">
  <svg className="scroller__thumb" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
    <polygon points="0 50 37 68 37 32 0 50" style={{ fill: 'rgb(24,24,62)' }} />
    <polygon points="100 50 64 32 64 68 100 50" style={{ fill: 'rgb(24,24,62)' }} />
  </svg>
</div>

补充说明 #

不需要额外导入任何外部内容，这只是React对DOM属性的语法要求和原生HTML的差异调整，修改后SVG即可正常渲染。

内容的提问来源于stack exchange，提问作者Kiki-ko