Javascript 突出显示值更改

我正在使用ReactJS，我想知道当DOM中的某个元素的值被更改时，是否可以高亮显示该元素

我有一个元素列表，这些元素的值会定期更新。虽然我可以使用React的动画库界面在DOM中为进入列表的新项目或离开列表的项目设置动画，但我正在努力找出如何检测列表中现有元素的实际值更改

---

有什么办法吗？谢谢大家!

如果您的新值作为新道具出现，那么您可以在组件上使用生命周期方法。它是在组件更新之前调用的

在该方法中，您可以比较新值（作为参数传递给该方法）和旧值（作为

this.props

提供）

---

例如：

componentWillReceiveProps: function(newProps) {
    if(this.props.query != newProps.query) {
        //handle change of query prop
        //may include calls to this.setState()
    }
}

---

假设元素是输入元素，则需要使用事件侦听器。如果要突出显示该元素，我建议使用一个CSS类突出显示该元素，然后根据状态（如果是子元素，则使用props）在

render（）中有条件地应用它

例如，您可以使用一个组件，在
render（）
中添加一个处理程序函数和相应的侦听器：

handleChange:函数（evt）{
//输入已更改，更新组件状态（或调用父方法，如果是子方法）
this.setState（{changed:true}）；
},
render:function（）{
返回(
);
}

这将为您指明正确的方向。
我也遇到了同样的问题，然后我决定创建一个通用的小模块来处理它，您可以从这里安装它


使用

yarn add react-change-highlight

使用它可以将要在组件内部高亮显示的零件包装起来，如下所示

import ChangeHighlight from 'react-change-highlight';

export default () => {
  const [count, setCount] = useState(0);

  return (
    <ChangeHighlight>
      <div ref={React.createRef()}>{count}</div>
    </ChangeHighlight>
  );
}

从“反应更改突出显示”导入更改突出显示；
导出默认值（）=>{
const[count，setCount]=useState（0）；
返回(
{count}
);
}

您将在下面的示例中找到关于更改的突出显示


我希望您能发现这一点很有用
当属性发生变化时，会触发一个生命周期方法：如果用户在框中键入某个内容，这将突出显示，这是@AnikDang想要的吗？我以为他们希望在数据更改时，在用户未引起更改的情况下突出显示。老实说，我不确定是否基于OP。它没有指定元素是什么或它们如何更改。但如果您仔细想想。。。突出显示是为了让大家注意数据刚刚更改的事实，如果用户更改了数据，这是毫无意义的，甚至有时会让人烦恼在处理验证系统时输入更改颜色（即，您开始键入格式不正确的输入，并且在键入时字段高亮显示为红色，直到正确为止）。我以为OP是在要求这样的东西。也许这是一个错误的假设。同样，这篇文章也不是非常清楚。同意，我只是根据上面所说的来猜测一下。非常感谢@Laizer。我正在努力实现这一点，它应该很好地工作。但是，我不知道为什么，但在重新命名时，this.props会变成react格式的对象，而不是最初传入的数组。这与reactJS的运行方式有关吗？听起来不对。组件的道具根本不会改变；它们应该具有与指定的值相同的值。我想知道您的组件道具是否在组件逻辑中被重写了？在React中修改道具是不行的。我在上面添加了一个示例，来自live code，用于检查道具的更改。@Lazier。非常感谢你！我很好奇-是什么原因导致这个.props有奇怪的值？@就像你说的，这些道具被直接修改了。这是一个初学者的错误：我在道具中创建了一个指向数组的变量。为了修复它，我创建了另一个数组并在中复制了道具的值，然后才基于新的副本创建了元素
import ChangeHighlight from 'react-change-highlight';

export default () => {
  const [count, setCount] = useState(0);

  return (
    <ChangeHighlight>
      <div ref={React.createRef()}>{count}</div>
    </ChangeHighlight>
  );
}