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

Question

我有一个 svg 地图组件，我想在道具更改时对其进行更新。 在某些路径上添加和减去类……诸如此类。

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...，我得到了诸如“选择不是函数”之类的错误。

如何访问ComponentWillReceiveProps中的地图？

或者 Snap.svg 甚至是该应用程序的最佳选择？

Answer 1

您正在使用 Snap.svg 进行直接 DOM 操作，render 和 componentWillReceiveProps 都不是这样做的好地方。我建议您在 componentDidUpdate 中执行此操作，它会在组件渲染后立即调用。但这不会为初始渲染调用。所以我们必须在componentDidUpdate 和componentDidMount 中都进行这种DOM 操作。为了防止重复相同的代码，您可以将此操作保留在另一个公共类方法中，并从componentDidUpdate 和componentDidMount 中调用它。此外，由于此时您的道具已更新，您只需在新类方法中使用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} />
  }
}