javascript - 将 React 与工具创建的 SVG 一起使用

Question

我知道我可以像使用 HTML 一样将 React 与 SVG 一起使用。然而，复杂的 SVG 将在对 React 一无所知的外部工具(Inkscape、Illustrator 等)中创建。现在，我过去常常通过 .querySelector 的 JQuery 选择它们来操作 SVG 节点(您可以在 Inkscape 中提供节点 ID，这使得选择它们非常容易)并通过常规 DOM 操作应用转换/节点操作。

考虑到 React 的单向渲染方式和虚拟 DOM，我看不出这是如何实现的。由于复杂的 SVG 往往会不断变化，将 SVG 复制出来并在文本编辑器中对其进行操作是行不通的，因为设计师会希望在他最喜欢的 SVG 工具(肯定无法打开 JSX)中重新打开它们。

有没有一种方法可以将 Reacts 单向渲染与手动选择和转换真实 DOM 中的节点结合在一起？

Answer 1

用 SVG 解决这个工作流问题是我创建 https://www.npmjs.com/package/react-samy-svg 的主要动机.您可以使用一种方式进行声明式渲染，而无需粘贴 svg 代码。所以 svg 文件可以独立于它的转换而发展。希望对您有所帮助。

Here's an example on Glitch