我想知道是否有任何内置的功能或东西在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"}}
有什么捷径吗?
3条答案
按热度按时间4ktjp1zp1#
我不确定是否存在React内置工具来实现这个功能。你可以自己编写代码,然后制作自己的快速工具来转换语法。另外,如果你不想使用外部网站,你可以看看svg-to-jsx模块,它可以在你的项目中使用,也可以通过命令行使用
或者svgr(https://github.com/gregberge/svgr)(用于SVG)-〉如果愿意,可以直接对组件进行React
xbp102n02#
没有内置的功能。你可以用一个简单的reducer函数把你的样式字符串转换成一个对象,然后把它作为一个prop传递。
yeotifhr3#
有一个vscode扩展名为**“html to JSX”**
下面是该扩展的链接:
https://marketplace.visualstudio.com/items?itemName=riazxrazor.html-to-jsx
只需选择所有svg代码,然后按Ctrl + Shift + P -〉将HTML转换为JSX -〉Ctrl + S保存即可