将SVG标记添加到React组件

Question

我正在尝试制作一个基于此CodePen标记的react组件.

我的组件看起来像这样:

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与HTML不同.您不能只复制粘贴任何旧的HTML或SVG标记blob,并期望它在JSX中工作而无需进行清理.这个特定SVG片段的主要问题是:

1. JSX不允许HTML样式的注释,例如你的例子:

   <!-- Child Dentition -->
   

   你需要完全删除它们,或者用JSX Javascript风格的注释替换它们:

   {/* Child Dentition */}
   

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

   事实上,如果你看看列表支持SVG标签,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">
   

3. JSX使用className属性而不是class.这是必要的,因为它class是Javascript中的保留关键字,所以像这样:

   <path class="tooth-11 tooth-11-parent" />
   

   应该成为这样的:

   <path className="tooth-11 tooth-11-parent" />
   

4. styleJSX中的属性采用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文档站点上的这个页面将允许你粘贴任意HTML片段并输出相应的JSX.看起来这并没有解决我上面提到的命名空间问题,但是通过一些手动修复,你可以得到一些可以很好地显示的有效JSX .