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 比 HTML 更接近 JavaScript，因此 React DOM 使用camelCase属性命名约定而不是 HTML 属性名称。

例如，在 JSX 中class变为className，并tabindex在tabIndex.

将连字符的 prop 名称替换为其驼峰版本。

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