如何摆脱反应错误警告告诉我将svg属性更改为驼峰案例？

Question

最近,我的团队从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停止在控制台中记录错误？

Answer 1

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

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