将 SVG 标记添加到 React 组件

Question

我正在尝试制作一个基于此 CodePen 标记的反应组件。

我的组件如下所示：

import React from 'react';

class Arches extends React.Component {
    render(){
        return(/*markup from codepen*/);
    }
}

export default Arches;

但是在渲染时它中断了：

unexpected token (764:3)
  762 |     d="m 46.842051,219.06796

在 React 组件中集成 SVG 的正确方法是什么？

Answer 1

React 确实支持 SVG，但这里的主要问题是 JSX is not identical to HTML。你不能只是复制粘贴任何旧的 HTML 或 SVG 标记，并期望它在 JSX 中工作而不需要一些努力来清理它。此特定 SVG 片段的主要问题是：

JSX 不允许 HTML 风格的注释， 就像你例子中的这个：
```

```
您要么需要完全删除它们，要么将它们替换为 JSX Javascript-style comments:
```
{/* Child Dentition */}
```

JSX 不支持 XML 命名空间。 所以像这里这样的命名空间元素将不起作用：

<metadata id="metadata8">
  <rdf:RDF>
    <cc:Work 
      rdf:about="">
      <dc:format>image/svg+xml</dc:format>
      <dc:type
         rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
      <dc:title>Human Dental Arches</dc:title>
    </cc:Work>
  </rdf:RDF>
</metadata>

事实上，如果您查看 supported SVG tags 的列表，甚至不包括 metadata，因此可以完全删除此部分，因为它不会影响视觉输出。还要注意像 xml:space 这样的命名空间属性也不起作用：

<text xml:space="preserve" x="87.802124" y="124.42228" style="font-size:10.13467216px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans">

JSX使用className属性代替class。这是必要的，因为class是保留关键字在 Javascript 中，所以像这样：
```
<path class="tooth-11 tooth-11-parent" />
```
应该变成这样：
```
<path className="tooth-11 tooth-11-parent" />
```

JSX 中的 style 属性采用 Javascript 对象， 而不是字符串文字。所以像这样的值：

<path style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>

需要变成：

<path style={{fill: 'none', stroke: '#000000', strokeWidth: 1, strokeLinecap: 'round', strokeLinejoin: 'miter', strokeMiterlimit: 4, strokeOpacity: 1, strokeDasharray: 'none'}} />

好的，变化太大了！但作为阅读到这里的奖励，我可以让您知道有一种简单的方法可以完成大部分这些转换：this page on the React documentation site will let you paste in arbitrary HTML snippets and output the corresponding JSX. It seems this doesn't take care of the namespace issues I mentioned above, but with a few manual fixes you can end up with some valid JSX that will display nicely.

将 SVG 标记添加到 React 组件

Add SVG markup to React component

svg

render

reactjs