如何将SVG样式转换为JSX？React是否有内置转换方法？

React本身并没有内置专门的函数来直接完成这个转换，但有几个非常简便的方法可以实现你想要的效果，下面给你详细说明：

方法一：自己写一个轻量的转换函数 #

这是最灵活且无需额外依赖的方式，只需要几行代码就能搞定：

function convertSvgStyleToJsx(styleString) {
  // 分割样式规则，过滤空项
  return styleString.split(';')
    .filter(rule => rule.trim() !== '')
    .reduce((styleObj, rule) => {
      // 拆分属性名和属性值
      const [propName, propValue] = rule.split(':').map(item => item.trim());
      // 将短横线命名（比如fill-opacity）转换为React要求的驼峰命名（fillOpacity）
      const camelCaseProp = propName.replace(/-([a-z])/g, (_, char) => char.toUpperCase());
      // 组装到结果对象中
      styleObj[camelCaseProp] = propValue;
      return styleObj;
    }, {});
}

// 测试你的SVG样式
const originalSvgStyle = 'opacity:0.647;fill:#cbcbcb;fill-opacity:1;stroke:#cbcbcb;stroke-width:0.26458335;stroke-opacity:1';
const jsxStyleObject = convertSvgStyleToJsx(originalSvgStyle);
console.log(jsxStyleObject);

运行这段代码后，就能得到你期望的结果：

{"opacity":"0.647","fill":"#cbcbcb","fillOpacity":"1","stroke":"#cbcbcb","strokeWidth":"0.26458335","strokeOpacity":"1"}

这个函数的逻辑很清晰：先把样式字符串按分号拆成单个规则，过滤掉可能存在的空项，再把每个规则拆成属性名和值，最后把短横线式的属性名转换成React style对象要求的驼峰命名，最终组装成目标对象。

方法二：使用现成的工具库 #

如果你不想自己写代码，可以借助一些成熟的前端工具库来完成转换，比如：

• style-to-object：专门用来解析CSS样式字符串为对象，并且会自动处理驼峰转换
• svg-to-jsx：不仅能转换样式，还能把整个SVG文件转换成React组件，适合批量处理SVG的场景

以style-to-object为例，用法非常简单：

import parse from 'style-to-object';

const svgStyle = 'opacity:0.647;fill:#cbcbcb;fill-opacity:1;stroke:#cbcbcb;stroke-width:0.26458335;stroke-opacity:1';
const jsxStyle = parse(svgStyle);
// 直接得到驼峰格式的样式对象

额外小技巧 #

如果你是要把整个SVG转换成React组件，很多常用的SVG转JSX工具都会自动帮你把style属性转换成React兼容的对象格式，完全不用手动处理，非常省心。

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