Question

我正在构建一个React应用程序，该应用程序充当我所参与的全球音乐场景的社区目录。我正在尝试遵循SVG图标策略，该策略将SVG代码与功能正常的React组件包装在一起，以便您随后可以将图标导入到将其用作React组件（NYT Article that outlines the strategy）的组件中。该策略适用于某些组件，但对于许多组件，我正在按照以下方式解析错误：

./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

ListViewIconDarkTheme中的样式标签引起了问题。

您为什么不尝试呢？（请参阅样式属性）

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;

Answer 2

问题在于svg语法与jsx冲突。 React支持大多数svg元素类型（请参阅：https://reactjs.org/docs/dom-elements.html#all-supported-svg-attributes），但是对于<style>之类的东西，您需要使子代react兼容。例如：

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

注意多余的花括号，然后将孩子转换为字符串。这应该可以解决您的第一个错误。

尝试将SVG元素包含为功能性React组件时出现Javascript解析器错误

2 个答案: