Reactjs 如何将SVG样式转换为JSX

我想知道react中是否有任何内置函数或东西用于将SVG样式属性转换为JSX

我有这样的风格：

'opacity:0.647;fill:#cbcbcb;fill-opacity:1;stroke:#cbcbcb;stroke-width:0.26458335;stroke-opacity:1'

我想把它转换成：

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

---

有什么简单的方法吗？

我不确定是否存在用于此目的的React内置工具。您可以自己编写代码，并制作自己的快速工具来转换语法。另外，如果您不想使用外部网站，可以查看svg to jsx模块，该模块可以在项目中使用，也可以通过命令行使用

npm install svg-to-jsx

---

或者SVG->React component的svgr（），如果您喜欢，我不确定是否存在用于此的React内置工具。您可以自己编写代码，并制作自己的快速工具来转换语法。另外，如果您不想使用外部网站，可以查看svg to jsx模块，该模块可以在项目中使用，也可以通过命令行使用

npm install svg-to-jsx

---

或者SVG->React component的svgr（），如果您愿意，可以直接使用它。没有内置的功能。您可以使用简单的reducer函数将样式字符串转换为对象，然后将其作为道具传递

const str=
“不透明度：0.647；填充：#cbcbcb；填充不透明度：1；笔划：#cbcbcb；笔划宽度：0.26458335；笔划不透明度：1”；
常量样式=str.split（“；”）；
const svgStyles=style.reduce（（对象，项，i）=>{
常量[键，值]=项拆分（“：”）；
const updatedkey=key.replace（/-（[a-z]）/ig，s=>s.slice（-1.toUpperCase（））；
obj[updatedkey]=值；
返回obj；
}, {});
console.log（svgStyles）此功能没有内置功能。您可以使用简单的reducer函数将样式字符串转换为对象，然后将其作为道具传递


const str=
“不透明度：0.647；填充：#cbcbcb；填充不透明度：1；笔划：#cbcbcb；笔划宽度：0.26458335；笔划不透明度：1”；
常量样式=str.split（“；”）；
const svgStyles=style.reduce（（对象，项，i）=>{
常量[键，值]=项拆分（“：”）；
const updatedkey=key.replace（/-（[a-z]）/ig，s=>s.slice（-1.toUpperCase（））；
obj[updatedkey]=值；
返回obj；
}, {});
console.log（svgStyles）在
处拆分，在
：
处拆分每对。在
-
处拆分每对密钥，大写并连接。现在将结果收集到object.split at
，在
：
处拆分每对。在
-
处拆分每对密钥，大写并连接。现在将结果收集到一个对象中。是的。。。这个很好。。。但我认为这个函数不是删除连字符和大写。。。谢谢你，你也可以使用助手功能将它们也变成大写：我已经完成并更新了你的答案，谢谢你的帮助…批准了它。您现在可以将其标记为选定答案。是的。。。这个很好。。。但我认为这个函数不是删除连字符和大写。。。谢谢你，你也可以使用助手功能将它们也变成大写：我已经完成并更新了你的答案，谢谢你的帮助…批准了它。您现在可以将其标记为选中的答案。此模块需要所有SVG来转换JSX，对吗。。。？这只是转换样式吗？这个模块需要所有SVG来转换JSX，对吗。。。？这只是转换样式吗？