最近,我的团队从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停止在控制台中记录错误?
最佳答案
如果你正在使用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