Reactjs SVG元素上的DOM属性错误无效

Question

我正在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库。但我不知道如何使用它来解决这个问题。

任何帮助！

提前谢谢

Answer 1

从文档中，

由于JSX更接近JavaScript而不是HTML，React DOM使用camelCase属性命名约定而不是HTML属性名称。

例如，在JSX中，class变成className，tabindex变成tabIndex。

将连字符的道具名称替换为其camelCase版本。

<circle cx="50" cy="50" r="40" stroke="green" strokeWidth="4" fill="yellow" />

Answer 2

我认为这是您的错误

因此，您必须更改svg标记内的属性才能使用camel-case，比如CCD_ 8作为CCD_stroke-linecap=""作为strokeLinecap=""