Ошибка синтаксического анализатора Javascript при попытке включить элемент SVG в качестве функционального компонента реагирования

Question

Я создаю приложение React, которое служит каталогом сообщества для глобальной музыкальной сцены, частью которой я являюсь.Я пытаюсь следовать стратегии значков SVG, которая оборачивает код SVG функциональным компонентом React, чтобы затем можно было импортировать значок в компонент, который использует его в качестве компонента React ( Статья NYT, в которой изложена стратегия ).Эта стратегия работает для некоторых компонентов, но для многих я получаю ошибки синтаксического анализа в следующем виде:

./src/Components/LargeScopeComponents/ArtistProfileDisplay/TopBar/SVG/ListViewIcon/ListViewIconDarkTheme.js
  Line 4:  Parsing error: Unexpected token, expected "}"

  2 | 
  3 | const ListViewIconDarkTheme = () => (
> 4 | 	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 57.72 53.2"><defs><style>.cls-1{fill:#fff}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M15.38 41.72h42.35V53.2H15.38zM.41 41.72h10.86V53.2H.41zM15.15 20.86H57.5v11.48H15.15zM0 20.86h10.86v11.48H0zM15.15 0H57.5v11.48H15.15zM0 0h10.86v11.48H0z"/></g></g></svg>
    | 	                                                                                         ^
  5 | );
  6 | 
  7 | export default ListViewIconDarkTheme;

Я не совсем уверен, почему парсеру javascript не нравится синтаксис SVG, потому что эта стратегия работает для других компонентов.Например, я использовал ту же стратегию для создания этого функционального компонента, и анализатор javascript не жаловался, когда включал его в компонент карты, в котором я его использую.

import React from 'react';

const CircleUpIcon_LightTheme = () => (
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 83.28 83.28"><g data-name="Layer 2"><g data-name="Layer 1"><circle cx="41.64" cy="41.64" r="38.64" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="6"/><path d="M41.64 20.7L20.92 56.58h41.43L41.64 20.7z"/></g></g></svg>
);

export default CircleUpIcon_LightTheme;

Мне интересно, есть ли какие-либо обходные пути для этого или модификации, которые я мог бы внести в синтаксис SVG, чтобы удовлетворить анализатор javascript.Любая помощь будет высоко ценится :)

Answer 1

Проблема в том, что синтаксис svg конфликтует с jsx. React поддерживает большинство типов элементов svg (см .: https://reactjs.org/docs/dom-elements.html#all-supported-svg-attributes),, но для таких вещей, как <style>, необходимо, чтобы дочерние элементы реагировали совместимо. Например:

<style>{
  `.cls-1{fill:#fff}`
}</style>

Обратите внимание на дополнительные фигурные скобки и преобразование дочернего элемента в строку. Это должно исправить вашу первую ошибку.

Answer 2

Тег стиля в ListViewIconDarkTheme вызывает проблему.

Почему бы тебе не попробовать это? (см. атрибут style)

const ListViewIconDarkTheme = () => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 57.72 53.2"><g 
id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path 
class="cls-1" style="fill:#fff" d="M15.38 41.72h42.35V53.2H15.38zM.41 
41.72h10.86V53.2H.41zM15.15 20.86H57.5v11.48H15.15zM0 
20.86h10.86v11.48H0zM15.15 0H57.5v11.48H15.15zM0 0h10.86v11.48H0z"/></g></g> . 
</svg>
);

export default ListViewIconDarkTheme;