如何摆脱告诉我将 svg 属性更改为驼峰式大小写的反应错误警告？

Posted 2023-03-06

【中文标题】如何摆脱告诉我将 svg 属性更改为驼峰式大小写的反应错误警告？

【英文标题】：How do I get rid of react error warnings telling me to change svg attributes to camel case?

【发布时间】：2016-12-29 12:19:48

【问题描述】：

最近我的团队从 React 15.1 升级到了 15.3。这次升级带来了这些错误：

warning.js:36 Warning: Unknown DOM property stroke-width. Did you mean strokeWidth?
    in g
    in svg
    in div (created by Unknown)
    in div (created by Unknown)
    in Unknown

warning.js:36 Warning: Unknown DOM property fill-rule. Did you mean fillRule?
    in g
    in svg
    in div (created by Unknown)
    in div (created by Unknown)
    in Unknown

我知道 React 需要多词属性作为驼峰式大小写，但这些 SVG 需要在非 React 上下文中可用。此外，它们在任何 js 或 jsx 文件中都没有提及，只是在 css 中作为这样的背景图像。

.icon-sprite 
    background-image: url('~icons/sprite.svg');


@mixin spriteIcon72( $spriteVals ) 
    @extend .icon-sprite;
    background-repeat: no-repeat;
    background-position: nth($spriteVals, 1) nth($spriteVals, 2);
    background-size: 1300px 600px;

react 组件自己使用的类如下所示

.active-icon 
    @include spriteIcon72($sprite-active);

如何让 React 停止在控制台中记录关于此的错误？

【参考方案1】：

如果你使用 WebPack，你可以在这里使用 babel 插件react-html-attrs：

https://github.com/insin/babel-plugin-react-html-attrs

根据作者的自述文件，插件执行以下操作：

将 JSX 类属性转换为 className 并将 for 属性转换为 htmlFor，允许您将 HTML 复制并粘贴到您的 React 组件中，而无需每次都手动编辑这些特定属性。

在这个声称可以解决您的问题的拉取请求中，作者添加了几个其他属性供插件翻译，包括 SVG 属性：

https://github.com/insin/babel-plugin-react-html-attrs/pull/5

【讨论】：

它不再起作用了，但是SVGR 起作用了