如何摆脱告诉我将 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;
}

反应组件将使用自己的类看起来像这样

.active-icon {
    @include spriteIcon72($sprite-active);
}

如何让 React 停止在控制台中记录与此相关的错误？

Answer 1

如果你使用 WebPack，你可以使用 babel 插件

react-html-attrs

：

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

Answer 2

将“笔划宽度”更改为“笔画宽度”。这不会造成任何问题。

Answer 3

我没有使用 WebPack，所以 @fnune 的解决方案对我不起作用。我通过更改 SVG 文件中的这些道具来修复它。例如

clip-path

转换为

clipPath

stroke-width

转换为

strokeWidth

，

fill-rule

转换为

fillRule

等等。

Answer 4

如果您使用Reactjs，您可以在组件中搜索（ctrl + F）并找到任何属性，例如：clip-path，strike-width，fill-rule等，并将它们替换为camelCase，例如：clipPath，strikeWith，fillRule，等等