我正在对一个React项目进行代码重构。它有如下组件
import * as React from "react";
function SvgPage(props) {
return (
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg> );
}
export default SvgPage;这些SVG文件呈现没有任何问题，但在控制台中，它给我错误
警告：无效的DOM属性stroke-width。您的意思是strokeWidth吗？
我如何摆脱这些控制台警告？我搜索谷歌，找到了SVGR库。但我不确定如何使用它来修复这个问题。
有没有人帮忙!
提前感谢!=）
2条答案
按热度按时间vsikbqxv1#
从文件上看，
由于JSX更接近JavaScript而不是HTML，因此React DOM使用
camelCase属性命名约定而不是HTML属性名称。例如，
class在JSX中变为className，而tabindex变为tabIndex。将带连字符的 prop 名称替换为其camelCase版本。
bqf10yzr2#
i think this is your error
所以你必须在svg标签里修改
stroke-width=“4”as strokeWidth=“4”像这样，谢谢