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

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，则可以在此处使用 babel 插件 react-html-attrs:

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

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

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 属性:

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