Aggiungi markup SVG al componente React

Sto provando a creare un componente che si basa su questo markup CodePen.Aggiungi markup SVG al componente React

La mia componente si presenta così:

import React from 'react'; 

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

export default Arches;

Ma lo rendono rompe:

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

Qual è il modo corretto di integrare SVG in un componente Reagire?

fonte

2015-07-24 fefe

React supporta SVG, ma il problema principale qui è che JSX is not identical to HTML. Non puoi semplicemente copiare e incollare qualsiasi vecchio blob di codice HTML o SVG e aspettarti che funzioni in JSX senza alcuno sforzo per ripulirlo. I principali problemi con questo particolare frammento di SVG sono:

JSX non permette i commenti HTML in stile, come questo dal vostro esempio:
```
 
```
potrete sia necessario rimuovere questi del tutto, o sostituirli con JSX Javascript-style comments:
```
{/* Child Dentition */} 
```

JSX non supporta XML spazi dei nomi. elementi Così namespace come qui non funziona:

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

In realtà, se si guarda l'elenco dei supported SVG tags, metadata non è nemmeno inclusa, quindi questa sezione possono essere rimosse a titolo definitivo in quanto non influisce sulla uscita visiva comunque. E anche notare che namespace attributi come xml:space non funzionerà neanche:

<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 utilizza l'attributo className invece di class. Questo è necessario perché class è una parola chiave riservata in Javascript, quindi nulla di simile:
```
<path class="tooth-11 tooth-11-parent" /> 
```
dovrebbe diventare questa:
```
<path className="tooth-11 tooth-11-parent" /> 
```

L'attributo style in JSX prende un oggetto JavaScript, non una stringa letterale. Quindi i valori di questo tipo:

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

dovranno essere trasformati in:

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

Okay, questo è un sacco di cambiamenti! Ma come ricompensa per aver letto fino a qui, posso farti sapere che c'è un modo semplice per fare la maggior parte di queste trasformazioni: this page sul sito di documentazione di React ti permetterà di incollare in frammenti HTML arbitrari e di produrre il JSX corrispondente. Sembra che questo non si prenda cura dei problemi dello spazio dei nomi che ho menzionato sopra, ma con alcune correzioni manuali si può finire con qualche JSX valido che sarà display nicely.

fonte

2015-07-24 19:07:02 hopper

La pagina HTML del compilatore JSX collegata non funziona davvero. Incollare HTML con attributi namespace produce codice con JSX che mantiene gli attributi namespace che falliscono in fase di runtime. – izk

@izk Questo è corretto, questo è menzionato come un avvertimento nell'ultima frase della risposta: "... questo non si occupa dei problemi dello spazio dei nomi che ho menzionato sopra ..." – hopper

Aggiungi markup SVG al componente React

risposta

Problemi correlati