Javascript 当React元素'；s文本更改

以下是我的代码库片段-

目前，通过更改类和CSS转换，文本在加载和装入新段落组件时淡入

但是，我希望在段落组成部分中的文本属性发生变化时也发生这种转换

在生命周期更新或渲染中执行此操作只会触发无限更新循环

---

我不知道该怎么办，因为我能找到的大多数讨论都是关于如何在加载时而不是在更新时使文本淡入的功能。

以下是代码片段解决方案

import React, { Component } from "react";
import "./Style.css";

class Paragraph extends Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false
    };
  }

  componentDidMount() {
   setInterval(() => {
     this.fade();
   }, 1000); 
  }

  fade() {
    this.setState({ open: !this.state.open });
  }

  render() {
    const text = this.props.text;

    const classes = this.state.open ? "greenCls" : "redCls";

    return <div className={classes}>{text}</div>;
  }
}

export default Paragraph;

---

请尝试使用setTimeout解决此问题

https://codesandbox.io/s/transition-code-fgmyq

---

请检查解决方案。。。它正在工作。我将使用动画而不是转换，并在文本更改时更改元素键

key={text}

，这样它将被重新添加到DOM中，从而动画将再次运行。@Cristy非常感谢-这看起来确实是一种方法。我是个新手，所以你有没有办法详细说明我将如何实施这个计划？我不知道预期的结果是什么。如果在播放动画时文本发生更改，该怎么办？动画应该重新开始（随着文本的变化）还是继续（随着当前过渡的变化）？我们可以假设在动画播放结束之前，文本不会改变（否则，我们只是重新启动动画）。我基本上会有另一个组件（把它想象成一个按钮），当点击时，它会改变传递到文本属性中的字符串。与文本突然变为新字符串不同的是，我希望淡入淡出过渡能够平滑移位。因此，从技术上讲，这是可行的，但现在由于设置间隔，文本每秒都在不断淡入淡出。当“文本”道具改变时，有没有办法限制动画只出现一次？编辑：事实上，我认为这不管用。它不断地更改类，但我需要它在文本更改时发生，并且只有在该文本更改时才会发生。@georgeleebert当道具更改时，您可以在shouldComponentUpdate中更改状态值，并且在更改状态的帮助下，您可以设置动画。对，我想我已经尝试过了。如果我更改shouldComponentUpdate中的状态值，组件将再次更新，强制执行“超出最大更新深度”

https://codesandbox.io/s/transition-code-fgmyq