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

问题描述

最近我的团队从React 15.1升级到了15.3。此次升级会带来以下错误：

Recently my team upgraded from React 15.1 to 15.3. With this upgrade comes these errors:

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中像这样的背景图像。

I understand that react wants multi-word properties as camel case, but these SVGs need to be usable in a non-React context. Also, they aren't mentioned in any js or jsx file, just in css as a background image like this.

.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组件将使用的类如下

The class that the react component would use itself looks like this

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

我如何获得React来停止在控制台中记录有关此的错误？

How can I get React to stop logging errors in the console about this?

推荐答案

如果您使用的是WebPack，则可以使用babel插件 react-html-attrs 此处：

If you're using WebPack, you can use the babel plugin react-html-attrs here:

根据作者的自述文件，该插件执行了

From the author's readme, the plugin does the following:

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

In this pull request, which claims to solve your issue, the author has added several other attributes for the plugin to translate, including SVG attributes:

这篇关于如何摆脱告诉我将svg属性更改为驼峰大小写的React错误警告？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！