Animacja składnika, gdy zmiany stanu w React.js

Question

Próbuję zrobić małą animację na elemencie HTML, gdy wartości danych przechowywane w stanie zmienić. Jak to osiągnąć?

Jak dodać klasę CSS do komponentu w componentWillUpdate i usunąć ją w componentDidUpdate? Nie widzę tam żadnego odniesienia do żadnego elementu HTML.

Answer 1

Jeśli trzeba dodać klasę do komponentu: React.findDOMNode(this).classList.add("classname");

Aby usunąć: React.findDOMNode(this).classList.remove("classname");

Jeśli próbujesz dodać klasę w componentWillUpdate i usunąć go w componentDidUpdate, że trzeba używać czegoś jak setTimeout, aby zauważyć zmianę. Na przykład:

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