reactjs - React 中的 Snap.svg - 如何在生命周期方法中访问 svg？

Question

我有一个 svg map 组件，我想在 Prop 更改时更新它。在某些路径上添加和减去类...诸如此类。

Snap.svg 似乎是要走的路。如果有人知道更好的方法，我很想听听!

这是我的渲染方法，标有皱眉的两行是我想要在生命周期方法中工作的那些，例如 ComponentWillReceiveProps

render() {
    var map = Snap('#map');
    Snap.load("images/map.svg", function(data){
        if (map) {
            map.append(data);
            const a2047 = map.select('#a2047');               <---- :(
            a2047.attr({stroke:'yellow', strokeWidth:'6px'})  <---- :(
        }
    })

    return (
        <div className="map" id="map"/>
    );
}

问题是，map 将无法在除此 Snap.load 回调之外的任何其他地方使用。我尝试了几种方法，使用 state、window.map、this.map... 我收到诸如“select is not a”之类的错误函数'。

如何访问 ComponentWillReceiveProps 中的 map ？

或者 Snap.svg 甚至是这个应用程序的方式吗？

Answer 1

您正在使用 Snap.svg 进行直接 DOM 操作，render 和 componentWillReceiveProps 都不是执行该操作的好地方。我建议你在 componentDidUpdate 中这样做在组件渲染后立即调用。但这不会为初始渲染调用。所以我们必须在 componentDidUpdate 和 componentDidMount 中执行此 DOM 操作。为了防止重复相同的代码，您可以将此操作保留在另一个通用类方法中，并从 componentDidUpdate 和 componentDidMount 中调用它。此外，由于此时您的 props 已经更新，您可以在新类方法中使用 this.props 简单地访问它们。

示例:

// @sigfried added to answer his comment below
import Snap from 'snapsvg-cjs';

export default class Mermaid extends Component {
  svgRender() {
    let element = Snap(this.svgDiv)
    Snap.load("images/map.svg", function(data){
      if (element) {
        element.append(data);
      }
    });
  }
  componentDidMount() {
    this.svgRender();
  }
  componentDidUpdate() {
    this.svgRender();
  }
  render() {
    return  <div ref={d=>this.svgDiv=d} />
  }
}