将 React 与工具创建的 SVG 结合使用

Question

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

鉴于单向渲染的 React 方式和虚拟 DOM，我不知道如何实现这一点。由于复杂的 SVG 往往会不断变化，因此将 SVG 复制出来并在文本编辑器中操作它们是行不通的，因为设计者希望在他最喜欢的 SVG 工具（肯定无法打开 JSX）中重新打开它们。

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

Answer 1

需要 SVG 文件并将其加载到渲染方法中。使用 ref="svg" 你可以引用 DOM 节点并操作它。如果您需要在页面加载时操作文件，您可以在 componentDidMount 方法中添加逻辑，一旦安装了所有内容，该方法就会被触发：

import React, {Component} from 'react';

export default class Test extends Component {
  componentDidMount = () => {
    const node = this.refs.svg;
    // manipulate your node
  }

  render() {
    const svg = require('crazy-big-file.svg');
    return (
      <div>
        <svg ref="svg" dangerouslySetInnerHTML={{__html: svg}}/>
      </div>
    );
  }
}