Javascript 强制DOM替换以触发显示动画

我有一个组件，看起来像：

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

这一切都非常有效，当设备最初渲染时，它确实会淡入

问题在于，当状态更改为将指示器从

i

更改为

n

（反之亦然）时，DOM元素不会得到更新。我知道这是故意的，因为React的虚拟DOM，但这实际上防止了

出现

动画再次触发。我需要元素重新出现

有没有办法在换班时再次触发

---

如果不这样做，是否有任何方法可以强制React替换DOM元素，从而使

显示

再次设置动画？

这可以通过React组件元素上的

键

属性来完成。如果键不同，它会发出信号，表示元素不同，应该重新渲染。在这种情况下，可以将指示器值用作键的一部分，以确保其在更改时不同

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

let指示符=；
如果（这个道具）{
指标=；
}
返回{指标}；

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