力DOM更換觸發顯示動畫

Question

我有一個看起來像一個組件：

class Device extends React.Component { 
    render() { 
     let indicator = <i className="i display" />; 
     if (this.props.n) { 
      indicator = <i className="n display" />; 
     } 
     return <div>{indicators}</div>; 
    } 
} 

的CSS：

.display { 
    animation-name: appear; 
    animation-duration: 1s; 
} 
@keyframes appear { 
    from { 
     opacity: 0; 
    } 
    to { 
     opacity: 1; 
    } 
} 

這一切的偉大工程，在設備最初呈現它在褪色。

問題是，當狀態改變以將指示符從i更改爲n（反之亦然）時，DOM元素不會更新。我知道這是有意的，因爲React的虛擬DOM，但這實際上阻止了appear動畫再次觸發。我需要的元素重新出現。

有什麼辦法可以再次觸發班級變更？

失敗，有什麼辦法強制React替換DOM元素，所以appear再次被動畫？

Answer 1

這可以通過React組件元素上的key屬性來完成。如果密鑰不同，則表明該元素不同並且應該重新呈現。在這種情況下，您可以使用指標值作爲密鑰的一部分，以確保它在更改時不同。

let indicator = <i key="i" className="i display" />; 
if (this.props.n) { 
    indicator = <i key="n" className="n display" />; 
} 
return <div>{indicators}</div>;