Javascript 在静态文件中，js动画可以正常工作，但在react jsx中，它不会显示

“严格使用”；
//在Github中使用网页包和更好的Typescript实现更整洁的代码
// https://github.com/ste-vg/plant-drawer
console.clear（）；
分枝状变种；
（功能（分支状态）{
BranchState[BranchState[“就绪”]=0]=“就绪”；
BranchState[BranchState[“动画制作”]=1]=“动画制作”；
BranchState[BranchState[“ended”]=2]=“ended”；
})（BranchState | |（BranchState={}））；
var Branch=/**@class*/（函数（）{
功能分支（舞台、设置、网格、placeBehind）{
如果（placeBehind==void 0）{placeBehind=null；}
this.branchs=[]；
this.state=BranchState.ready；
this.branchOut=new Rx.Subject（）；
this.thornOut=new Rx.Subject（）；
this.flowerOut=new Rx.Subject（）；
this.leafOut=new Rx.Subject（）；
this.grid=50；//grid；
这个阶段=阶段；
this.placeBehind=placeBehind；
设置宽度=2；
settings.opacity=1；
this.state=BranchState.animating；
var path=this.createLine（设置）；
var branchCount=2；
对于（变量i=0；i4）{
var choice=Math.random（）；
变量长度=settings.length-settings.progress；
var pos=分支。getPointAtLength（长度）；
var sec=Math.ceil（（settings.progress/settings.length）*settings.sections）-2；
如果（第4节）
秒=4；
变量输出={
位置：{x:pos.x，y:pos.y}，
宽度：宽度目标，
章节：第
};
如果（选择<0.02）
_这个。分支。下一个（出）；
else if（选项<0.1）
_这个。thornOut。下一个（out）；
否则如果（选择<0.2）
_这个。开花。下一个（开花）；
否则如果（选择<0.4）
_这个。向外翻。下一个（向外翻）；
}
},
onComplete:函数（）{
如果（索引=总计-1）
_this.state=BranchState.end；
//branch.remove（）；
}
});
};
Branch.prototype.update=函数（）{
this.branchs.map（函数集）{
set.path.style.strokedashcoffset=“”+set.settings.progress；
set.path.style.strokeWidth=set.settings.width+“px”；
//set.path.style.opacity=`${set.settings.opacity}`；
});
};
Branch.prototype.createLine=函数（设置）{
var x=设置.x；
var y=设置。y；
var dx=settings.directionX；
var dy=settings.directionY；
变量路径=[
“M”，
''+x，
''+y
];
var步骤=settings.sections；
var阶跃=0；
var getNewDirection=函数（方向、目标位置）{
如果（！goAnywhere&&settings['direction'+direction.toUpperCase（）]！=0）
返回设置['direction'+direction.toUpperCase（）]；
return Math.random（）<0.5？-1:1；
};
如果（步骤*2>步骤）
路径推送（“Q”）；
while（步骤<步骤*2）{
step++；
var Steppup=此。Steppup（步骤）；
x+=（dx*递增）*此网格；
y+=（dy*逐步上升）*这个网格；
如果（步骤！=1）
path.push（'，'）；
路径推送（''+x）；
路径推送（“”+y）；
如果（步骤%2！=0）{
dx=dx==0？getNewDirection（'x'，步骤>8）：0；
dy=dy==0？getNewDirection（'y'，步骤>8）：0；
}
}
返回路径join（“”）；
};
Branch.prototype.stepUp=函数（步骤）{
var r=Math.random（）*10；
返回步长/（10+r）；
};
Branch.prototype.clear=函数（）{
this.branchOut.complete（）；
this.thornOut.complete（）；
这个.leafOut.complete（）；
这个。flowerOut。complete（）；
map（函数（set）{return set.path.remove（）；}）；
};
Branch.prototype.getColor=函数（索引）{
var base=['#646F4B']；
var greens=['#335eea']/，'#5DC4A8'，'#4BBD9E'，'#3AB795'，'#A7CCBA'，'#91C0A9'，'#86BAA1']
var chooseFrom=index==0？基数：绿色；
返回chooseFrom[Math.floor（Math.random（）*chooseFrom.length）]；
};
返回分支；
}());
var Flower=/**@class*/（函数（）{
函数