Snap.svg 在 React 中 - 如何在生命周期方法中访问 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... 我得到了诸如 'select is not a function'.

之类的错误

如何访问 ComponentWillReceiveProps 中的地图？

或者 Snap.svg 是否适合此应用程序？

Answer 1

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

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

Snap.svg in React - how to access the svg in a lifecycle method?

reactjs

svg

snap.svg

示例：