我想在每次由于props更改而重新渲染时在react组件上播放动画：
react：
function Card({ cardText }) {
return <div className="roll-out">{cardText}<div/>
}
所以我做了css：
@keyframes rollout {
0% { transform: translateY(-100px); }
100% { transform: none; }
}
.roll-out {
animation: rollout 0.4s;
}
但是，动画仅在初始渲染时播放一次。我想每次<Card />由于cardText更改而重新渲染时都播放它。我怎样才能实现它？
添加一个这样的键：
function Card({ cardText }) {
return <div key={cardText} className="roll-out">{cardText}<div/>
}
在您的代码中，当 div 重新呈现时，react 只会更改其内部文本。添加一个键会使react认为它是一个不同的 div 当键改变时，所以它会卸载它并再次安装。
这里的技巧是key在你的卡片元素上使用一个随机字段。React 的 diffing 算法将具有相同键的元素视为相同，因此随机化键将使 React 将每个重新渲染的元素视为新元素，因此将从 DOM 中删除旧元素并添加一个全新的元素
这是一个使用 @aXuser264 的代码作为基础的演示。
class Card extends React.Component{
onClick = ()=>this.forceUpdate();
render(){
return <div key={Math.random()} className="roll-out" onClick={this.onClick}> {
this.props.cardText
} </div>
}
}
ReactDOM.render( (<Card cardText="Hey There" />) , document.getElementById('root'))@keyframes rollout {
0% {
transform: translateY(-100px);
}
100% {
transform: translateY(0);
}
}
.roll-out {
animation: .4s rollout;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>对不起，现在我完全得到了你的问题，要强制元素重新渲染，你可以简单地改变它的keyprops，这将触发渲染，使react认为它是另一个元素
参考这个答案：https : //stackoverflow.com/a/35004739
function Card({
cardText
}) {
return <div className = "roll-out" > {
cardText
} </div>
}
ReactDOM.render( (<Card cardText="Hey There" />) , document.getElementById('root'))@keyframes rollout {
0% {
transform: translateY(-100px);
}
100% {
transform: translateY(0);
}
}
.roll-out {
animation: .4s rollout;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>