如何摆脱告诉我将svg属性更改为驼峰大小写的React错误警告？ [英] How do I get rid of react error warnings telling me to change svg attributes to camel case?

问题描述

最近我的团队从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:

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

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

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

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

Transforms JSX class attributes into className and for attributes into htmlFor, allowing you to copy and paste HTML into your React components without having to manually edit these particular attributes each time.

在此拉取请求中，声称可以解决您的问题，作者添加了其他几个属性要翻译的插件，包括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:

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

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