Javascript ReactJS中的复杂SVG动画

我正在使用React构建一个动画介绍，其中包括三个标语和动画SVG图标

我选择管理SVG动画，因为它提供了可靠的跨浏览器支持。这还允许我对

元素执行一个简单的

d

属性。我将上述内容与

ReactTransitionGroup

然而，我在尝试让TweenMax和React玩得更好时遇到了以下问题：

在选择组件状态时，

componentWillReceiveProps

会在控制台中被调用两次。这意味着，我的动画方法将被调用两次。这是什么原因造成的？在这个用例中，使用Redux存储标记索引可能是更好的选择吗

目前我制作动画的方式似乎非常粗糙，例如重复

this.refs

和

findDOMNode（）

。肯定有更好的办法吗？我的代码结构可以通过哪些方式改进

我完全被难倒了，我很想被指向正确的方向

你好，杰森

---

代码

html，
身体{
保证金：0；
填充：0；
宽度：100%；
身高：100%；
}
身体{
背景：rgb（240,90,48）；
字体：粗体1em无衬线；
颜色：rgb（255、255、255）；
文本对齐：居中；
}
.暴露包装{
位置：绝对位置；
宽度：200px；
高度：200px；
排名：0；
右：0；
底部：0；
左：0；
保证金：自动；
溢出：隐藏；
}
.显示图标{
宽度：100px；
高度：100px；
保证金：0自动2米自动；
}
.显示图标svg{
宽度：100%；
身高：100%；
}
.显示图标。填充{
填充：rgb（251、163、10）；
}
.显示图标.遮罩{
填充：rgb（240、90、48）；
}
.显示图标.笔划{
中风：rgb（251,163,10）；
笔划线头：圆形；
笔画宽度：5；
}
.显示文本{
位置：绝对位置；
宽度：100%；
}
.切换区域设置{
位置：固定；
顶部：1米；
左：1米；
}

常量ReactTransitionGroup=React.addons.TransitionGroup
常量UI_文本={
我们：{
揭示：[
{ID:0，文本：'Tagline 1'}，
{ID:1，文本：'Tagline 2'}，
{ID:2，文本：'Tagline 3'}
]
},
NL_NL:{
揭示：[
{ID:0，文本：'Slagzin 1'}，
{ID:1，文本：'Slagzin 2'}，
{ID:2，文本：'slagzin3'}
]
}
}
类React.Component{
构造函数（）{
超级（）；
此.state={
索引：0，
地点：'EN_US'
}
}
nextagline（）{
this.setState（{index:this.state.index+1}）
console.log（'this.state.index@'+this.state.index）
}
switchLocale（）{
让locale=（this.state.locale=='EN_-US'）？'NL_-NL'：'EN_-US'
this.setState（{locale}）
}
render（）{
返回(
this.nextTagline（）}/>
this.switchLocale（）}/>
)
}  
}
类RevealText扩展了React.Component{
fadeIn（回调、延迟）{
TweenLite.fromTo（React.findDOMNode（this）），0.5，
{
y:‘100px’，
不透明度：0
},
{ 
y:0，
延迟：延迟，
不透明度：1，
ease:Quad.easeOut，
onComplete:回调，
完整镜：这个
}
)
}
淡出（回调、延迟）{
TweenLite.fromTo（React.findDOMNode（this）），0.5，
{
y:0，
不透明度：1
},
{ 
y:'+=100px'，
延迟：延迟，
不透明度：0，
ease:Quad.easeIn，
onComplete:回调，
完整镜：这个
}
)
}
组件将出现（回调）{
//console.log（'将显示RevelText'）
this.fadeIn（回调，1）
}
ComponentDidDisplay（）{
//console.log（“RevelText确实出现了”）
}
组件将离开（回调）{
此.fadeOut（回调，0）
}
组件离开（）{
//console.log（'RevealText确实离开了'）
}   
componentWillEnter（回调）{
this.fadeIn（回调，1）
}
componentDidEnter（）{
//console.log（“RevelText未输入”）
}        
render（）{
返回(
{UI_TEXT[this.props.locale].discover[this.props.tag].TEXT}
)
}
}
类RevealIcon扩展了React.Component{
组件将出现（回调）{
const HAND_1=[React.findDOMNode（this.refs.HAND_1），
React.findDOMNode（此.refs.HAND_1_面具），
React.findDOMNode（此.参考文献.手\u 1\u拇指）]
const HAND_2=[React.findDOMNode（this.refs.HAND_2），
React.findDOMNode（此.refs.HAND_2_掩码）]
const HAND_3=React.findDOMNode（此.refs.HAND_行）
const HAND_4=[React.findDOMNode（this.refs.HAND_行_1），
React.findDOMNode（本参考手册第2行），
React.findDOMNode（本参考手册第3行），
React.findDOMNode（本参考手册第4行），
React.findDOMNode（本参考手册第5行），
React.findDOMNode（本参考手册第6行），
React.findDOMNode（本参考手册第7行），
React.findDOMNode（本参考手册第8行）]
让动画=新的时间线最大值({
延误：2，
onComplete:this.props.nextTag，
完整镜：这个
})
动画从到（手绘1，0.5，
{
y:'-=100px'，
x:'+=100px'，
不透明度：0
},
{
y:0，
x:0,，
不透明度：1，
ease:Quad.easeOut
})
F