javascript - 高亮值变化 ReactJS

Question

我正在使用 ReactJS，我想知道是否可以在 DOM 中的元素发生更改时突出显示该元素。

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

关于如何做到这一点有什么想法吗？谢谢!

Answer 1

我有同样的问题，然后我决定创建一个通用的小模块来处理它，你可以从这里安装

https://www.npmjs.com/package/react-change-highlight

使用

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>
  );
}

你会在下面的例子中找到变化的亮点

希望你觉得有用