Question

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

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

有没有办法让Reacts单向渲染并手动选择和转换真实 DOM中的节点？

Answer 1

需要SVG文件并将其加载到render方法中。使用ref =“svg”，您可以引用DOM节点并对其进行操作。如果你需要在pageload上操作文件，你可以在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>
    );
  }
}

Answer 2

使用SVG解决此工作流问题是我创建https://www.npmjs.com/package/react-samy-svg的主要动机。您可以使用单向声明呈现，而无需粘贴svg代码。所以svg文件可以与它的转换分开进行。希望它有所帮助。

Here's an example on Glitch

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

2 个答案: