javascript - 重新渲染我的 React 组件时我的动画不工作？

Question

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

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

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

您可以使用 keys该 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>);
 }

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