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

前端之家收集整理的这篇文章主要介绍了javascript – 如何摆脱反应错误警告告诉我将svg属性更改为驼峰案例?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

猜你在找的CSS相关文章