javascript - React.js 中状态变化时动画组件

标签 javascript reactjs

当存储在状态中的数据值发生变化时,我试图在 HTML 元素上制作一个小动画。如何实现?

如何在 componentWillUpdate 中将 CSS 类添加到组件并在 componentDidUpdate 中将其删除?我在那里没有看到对任何 HTML 元素的任何引用。

最佳答案

如果需要给组件添加类:React.findDOMNode(this).classList.add("classname");

删除: React.findDOMNode(this).classList.remove("classname");

如果您尝试在 componentWillUpdate 中添加一个类并在 componentDidUpdate 中删除它,您需要使用类似 setTimeout 的方法来通知更改。例如:

componentWillUpdate: function() {
    React.findDOMNode(this).classList.add("class1", "class2");
},
componentDidUpdate: function() {
    var el = React.findDOMNode(this);
    setTimeout(function(){
       el.classList.remove("class1");
    }, 1000);
}

关于javascript - React.js 中状态变化时动画组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30764693/

相关文章:

javascript - 为什么我会获得这种奇怪的行为,试图为拖动到 PrimeNG FullCalendar 组件中的不同事件类型使用不同的颜色?

javascript - ReactJS - 读取 json 数据

javascript - 在 PWA 中在线(wifi 打开)时,后台同步代码不会自动工作

javascript - 如何在 React Native 中使用导航器向组件动态添加新 Prop

javascript - 如何获取数据并存储在 React Context API 中?

javascript - 尝试从客户端的 Medium API 访问公共(public)故事时出错

javascript - 可变属性作为​​ jQuery 插件中的参数

javascript - renderToString 使文件的每个字符都小写,因此无法渲染,如何解决此问题?

javascript - react ;父级从子级获取输入数据

reactjs - 如果应用程序关闭,则 React-Native 深层链接不起作用(React-Navigation v5)