2016-08-09 51 views
0

Ich bekam Probleme während der Entwicklung reagieren. Ich benutzeWie manipuliert man eingebettete Svg Node mit react?

<img src="example.svg"> 

Oder mit Modul 'react-inlinesvg' SVG

<Isvg src="example.svg" wrapper={React.DOM.div}> 

i den <g> Knoten der SVG-Datei direkt Klasse in reagieren, hinzufügen und entfernen manipulieren möchten einzubetten (ps: es ist ziemlich einfach in JQuery). Ich habe versucht, den Verweis auf das Element zu erhalten, aber es ist fehlgeschlagen. was soll ich machen?

Antwort

0

Es gibt 2 Möglichkeiten:

  • gibt es gewisse Abfrage Selektoren;
  • Benutzer reagieren zum Schreiben SVG;

Ich würde Ihnen den zweiten Ansatz empfehlen. Wenn Sie Ihr eigenes SVG manipulieren möchten, können Sie es einfach in React als Komponente schreiben und mit anderen React-Komponenten arbeiten.

Here Sie können eine Liste der unterstützten Elemente in React sehen.

+0

Ich bevorzuge den ersten Ansatz, aber Abfrage-Selektor scheint nicht gut in der Komponente reagieren. Für die zweite, wenn ich die SVG umschreiben, finde ich, dass es viele Formatfehler gibt, und es wird die Komponente ein wenig unordentlich machen. Ich frage mich, ob es eine bessere Möglichkeit gibt, den Dom-Knoten in Svg direkt zu manipulieren. Danke vielmals. –

+0

Reagieren hat nichts mit Ihrem Svg zu tun, wenn Sie den ersten Ansatz verwenden. jQuery selector ist ein Selektor, der offensichtlich manchmal über dem nativen Abfrage-Selektor erstellt wird. Wenn Sie wirklich Selektoren verwenden möchten - verwenden Sie jQuery, aber ich sehe keinen Grund dafür, wenn Sie bereits React verwenden. Warum sollte die Komponente unordentlich sein? Es sollte zu 95% das gleiche wie das Original SVG sein. –

+0

Das Brechen einer großen SVG zu Komponenten wird Code-Datei zu groß, und wenn ich die Svg in mehrere Komponenten teilen, wird es viele Formatfehler in Attribut "d" (ich habe es bereits versucht) und viele Tags müssen ersetzt werden, um akzeptiert Tags in Reagieren. Die Arbeit scheint ziemlich schrecklich zu sein. Ich sehe, dass JQuery den Dom-Knoten sehr leicht manipuliert, also frage ich mich, ob es einen Weg wie JQuery in React gibt. Ich habe jedoch nichts gefunden. Wie auch immer, vielen Dank. –