重新渲染我的 React 组件时，我的动画不起作用？

Question

所以，我的问题是我有一个组件，我将一个动画与它相关联，并且在第一次渲染组件时它正在工作，但是在事件单击时我更改了与该组件关联的一些条件和一些道具，但是我的元素没有被重新渲染，它只是改变了已更改的内容，这意味着该元素不会从 dom 中删除，而是再次添加到 DOM 中，这就是为什么我无法再次看到动画，所以它不是 re -rendered 或者我只是没有明白重新渲染的意思。

我当然尝试了一些解决方案，但我被卡住了，我尝试使用这种方法：

this.forceUpdate();

但同样，我仍然没有得到任何东西。

我不认为我必须编写我编写的整个代码，因为它很多并且包含许多其他内容，但这是我认为需要的。

我的组件中的 methodWillReceiveProps ：

  componentWillReceiveProps(props) {
    if (props.isRerendered) {
      this.forceUpdate();
    }
  }

props.isRendered 每次都返回 true，我检查了一些 console.log 方法。

这是呈现的内容：

render() {
    return (
      <div
        className={cs({
          "tls-forms": true,
          "tls-forms--large": this.props.type === "S",
          "tls-forms--medium tls-forms--login": !(this.props.type === "S")
        })}
      >
      // content here 
      </div>);
 }

这是 sass 文件和简单的淡入淡出动画：

.tls-forms {
  animation: formFading 3s;
  // childs properties here 
}

@keyframes formFading {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

我将非常感谢您提供的任何帮助。

Answer 1

您可以使用react使用的键来确定某些内容是否已更改。这意味着您的渲染方法应如下所示：

import shortid from "shortid";

getRandomKey = () => {
    return shortid.generate();
}

render() {
    return (
      <div
        key={this.getRandomKey()}
        className={cs({
          "tls-forms": true,
          "tls-forms--large": this.props.type === "S",
          "tls-forms--medium tls-forms--login": !(this.props.type === "S")
        })}
      >
      // content here 
      </div>);
 }

由于您需要在每次渲染时运行动画，因此每次都需要生成一些随机键（这就是我们this.getRandomKey()在每次渲染时调用的原因）。您可以为 getRandomKey 实现使用任何您喜欢的东西，尽管 shortid 非常适合生成唯一键。