Javascript 如何使用动画每次重新渲染React组件

嗨，我有一张单页申请表

当我们加载页面时，我正在创建一些动画。若用户在同一页面中并重新加载此组件，则动画不会发生。我相信，由于DOM不会在没有状态或道具的情况下更新，因此我认为动画不会再次发生

重新加载时，考虑组件来自后端。

我被允许使用状态

我只是在这里修改代码。请考虑此组件每次都来自后端。 我试过使用这个.forceupdate，在componentDidUpdate内部--它不起作用

然后我在parent div中添加了state和Date.now（），如下所示

 constructor(props)
{
   constructor(props)
    this.state={
    time:Date.now()
    }
  }


<div data-value={this.state.time}>

构造函数（道具）
{
建造师（道具）
这个州={
时间：Date.now（）
}
}

没用

我为测试制作了小提琴。我的部件和小提琴一样。我想在每次页面加载时做动画（如果上面的部分是不可理解的，请考虑点击同一个URL并在每个点击上加载动画）

---

这是一种黑客解决方案，从性能角度看不一定很好，但您可以为组件分配一个随机的

键。这将导致React每次都将其视为一个新组件，并在其位置上装载一个新的副本组件，该组件应具有动画效果

您的动画正在挂载上播放，这就是与状态相关的内容无法工作的原因。在状态更改时，组件将更新而不是重新装载。上述修复程序旨在强制卸载/重新装载

这就是说，您可能应该编写一个函数，允许您随意触发此动画，而不是通过生命周期操纵的古怪方式。您可以通过添加行为来删除或应用CSS类来实现这一点，这将允许您实现所需的效果，并且从可预测性的角度来看可能会更好。
对于要重新渲染的组件，最好的方法是使用
键。只要
键
道具发生变化，组件就会卸载并重新装载。我知道这就是你要找的

我根据您的代码创建了一个小示例。
请查看：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  componentDidMount() {
    setInterval(() => {
      this.setState({ count: this.state.count + 1 });
    }, 1000);
  }

  render() {
    return (
      <div key={this.state.count}>
        <div className="drawLine">I am drawing the at top</div>
      </div>
    );
  }
}

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
计数：0
};
}
componentDidMount（）{
设置间隔（（）=>{
this.setState（{count:this.state.count+1}）；
}, 1000);
}
render（）{
返回(
我正在画最上面的画
);
}
}


根据您的应用程序，您可以用自己的方式完成
 查看我发布的答案，让我知道你是否在寻找答案。这行不通。因为我不确定何时会再次调用该组件。您需要为密钥找到一个值，当然这不是解决方案。这只是为了展示它是如何工作的。如果你需要更多的帮助，你需要添加更多关于你的代码的信息，以及确切的更新时间。