反应svg getTotalLength

Question

我想使用react（https://css-tricks.com/svg-line-animation-works/，但在ReactJS中）为SVG路径设置动画。 要正确地做到这一点，我需要知道一个路径的总长度，在JS中你可以只做path.getTotalLength（），当我的路径是由JSX创建的时候我怎样才能实现相同的目的？ 感谢

Answer 1

这就是React的参考资料派上用场的地方https://facebook.github.io/react/docs/more-about-refs.html

基本上当你创建svg时，你会在路径上设置一个ref然后你可以访问那个ref（实际上是dom中的元素）并调用getTotalLength（）

<svg><path ref="path"> </svg>

然后只要您使用的功能是您的反应组件的一部分，您就可以做到

var path = this.refs.path;
var pathLength = path.getTotalLength()

如果您使用的是es6，则不推荐使用字符串引用，您实际上会执行类似

的操作

    <svg><path ref={(ref) => this.path = ref}> </svg>

无论哪种方式都适用，后者是首选方式，如果你采用后一种方式，则不会调用this.refs.path而只需this.path来访问dom节点