Thêm đánh dấu SVG vào thành phần React

Question

Tôi đang cố gắng phản ứng Thành phần dựa trên đánh dấu CodePen này.

thành phần của tôi trông như thế này:

import React from 'react'; 

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

export default Arches; 

Nhưng trên làm cho nó phá vỡ:

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

cách thích hợp để tích hợp SVG trong một bộ phận Phản ứng là gì?

Answer 1

Phản ứng không hỗ trợ SVG, nhưng vấn đề chính ở đây là JSX is not identical to HTML. Bạn không thể chỉ sao chép-dán bất kỳ đốm màu cũ của HTML hoặc SVG đánh dấu và mong đợi nó để làm việc trong JSX mà không có một số nỗ lực để làm sạch nó lên. Những vấn đề chính với đoạn SVG đặc biệt này là:

1. JSX không cho phép bình luận HTML-phong cách, như thế này từ ví dụ của bạn:

   <!-- Child Dentition --> 
   

   Bạn sẽ cần phải loại bỏ một trong hai những hoàn toàn, hoặc thay thế chúng với JSX Javascript-style comments:

   {/* Child Dentition */} 
   

2. JSX không hỗ trợ XML không gian tên. yếu tố Vì vậy namespaced như đây sẽ không làm việc:

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

   Trong thực tế, nếu bạn nhìn vào danh sách các supported SVG tags, metadata thậm chí không được bao gồm, vì vậy phần này có thể được loại bỏ hoàn toàn vì nó không ảnh hưởng đến đầu ra hình ảnh anyway. Và cũng lưu ý rằng các thuộc tính như namespaced xml:space sẽ không làm việc, hoặc:

   <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 sử dụng className thuộc tính thay vì class. này là cần thiết vì class là một từ khóa dành riêng trong Javascript, vì vậy bất cứ điều gì như thế này:

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

   nên trở thành này:

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

4. Các style thuộc tính trong JSX mất một đối tượng Javascript, không một chuỗi chữ. Vì vậy, giá trị như thế này:

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

   sẽ cần phải được biến thành:

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

Được rồi, đó là rất nhiều những thay đổi! Nhưng như một phần thưởng cho việc đọc này, tôi có thể cho bạn biết có một cách dễ dàng để thực hiện hầu hết các phép biến đổi này: this page trên trang tài liệu React sẽ cho phép bạn dán đoạn mã HTML tùy ý và xuất JSX tương ứng. Có vẻ như điều này không quan tâm đến các vấn đề không gian tên mà tôi đã đề cập ở trên, nhưng với một vài bản sửa lỗi thủ công, bạn có thể kết thúc với một số JSX hợp lệ sẽ display nicely.