如何使用 React 操作嵌入式 svg 节点？答案

【问题标题】：How to manipulate embeded svg node using react?如何使用 React 操作嵌入式 svg 节点？
【发布时间】：2016-08-09 09:46:34
【问题描述】：

我在开发 react 时遇到了麻烦。我用

<img src="example.svg">

或者使用模块'react-inlinesvg'嵌入svg

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

我想直接在 react 中操作 svg 文件的<g>node，添加和删除类（ps：在 JQuery 中很容易）。我试图获取元素的 ref 但失败了。我该怎么办？

【问题讨论】：

标签： svg reactjs

【解决方案1】：

有两种选择：

我建议您使用第二种方法。如果您想操作自己的 SVG，您可以将它们作为一个组件在 React 中编写，并像使用其他 React 组件一样工作。

Here 你可以看到 React 支持的元素列表。

【讨论】：

我更喜欢第一种方法，但查询选择器在反应组件中似乎效果不佳。第二，当我重写svg时，我发现有很多格式错误，这会使组件有点乱。我想知道是否有更好的方法可以直接操作 svg 中的 dom 节点。非常感谢。
如果您使用第一种方法，React 与您的 svg 无关。 jQuery 选择器是一个很好的选择器，显然有时构建在原生查询选择器之上。如果你真的想使用选择器 - 使用 jQuery，但如果你已经使用 React，我看不出有任何理由。为什么组件应该是凌乱的？它应该与原始 SVG 95% 相同。
将大svg拆分成组件会使代码文件太大，当我将svg分成几个组件时，属性'd'会出现很多格式错误（我已经尝试过）并且很多标签必须替换为 React 中接受的标签。这项工作似乎很糟糕。我看到 JQuery 很容易操纵 dom 节点，所以我想知道 React 中是否有类似 JQuery 的方法。然而，我什么也没发现。无论如何，非常感谢。
你试过用这个：magic.reactjs.net/htmltojsx.htm吗？也许它可以帮助你。