Как мне избавиться от предупреждений об ошибках реагирования на изменение атрибутов 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

Я понимаю, что для реакции требуются свойства из нескольких слов, как в случае верблюда, но эти SVG-файлы должны использоваться в нереактивном контексте. Кроме того, они не упоминаются ни в одном файле 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

Из readme автора, плагин делает следующее:

Преобразует атрибуты класса JSX в className, а для атрибутов - в htmlFor, что позволяет копировать и вставлять HTML в компоненты React без необходимости каждый раз вручную редактировать эти конкретные атрибуты.

В этом запросе извлечения, который претендует на решение вашей проблемы, автор добавил несколько других атрибутов для плагина для перевода, включая атрибуты SVG:

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

Answer 2

Измените «ширину штриха» на «strokeWidth». Это не вызовет никаких проблем.

Answer 3

Я не использую WebPack, поэтому решение @fnune мне не помогло. Я исправил это, изменив эти реквизиты в файле SVG. напримерclip-pathвclipPath stroke-widthвstrokeWidth,fill-ruleкfillRuleи так далее.