Блог

Я создаю приложение 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 не жаловался, когда я включил его в компонент card, в котором я его использую.

 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. Любая помощь была бы высоко оценена 🙂

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

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

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

Причиной проблемы является тег style в 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;