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

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

Answer 1

React确实支持SVG，但这里的主要问题是JSX is not identical to HTML。您不能只复制粘贴任何旧的HTML或SVG标记blob，并期望它在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'}} />

好的，这是很多变化！但作为对此阅读的奖励，我可以告诉您，有一种简单的方法可以完成大部分转换：React文档站点上的this page将允许您粘贴任意HTML片段并输出相应的JSX。看起来这并没有解决我上面提到的命名空间问题，但是通过一些手动修复，你可以得到一些有效的JSX display nicely。

将SVG标记添加到React组件

1 个答案: