Javascript 转换为React代码时，CSS转换停止运行：

我在这里翻译了这段代码：

前面
返回
点击卡片翻转

变成了一个等价物，但它停止了作用

类TodoApp扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
正面：对
}
}
clickHandler=（）=>{
this.setState（（prevState）=>{
返回{front:！prevState.front}；
});
}
render（）{
警报（'调用的呈现：'+this.state.front）
返回(
前面
返回
)
}
}
ReactDOM.render（，document.querySelector（“#app”））

我验证了状态是否在true和false之间切换，但使用Chrome检查器验证了类名是否也在切换

---

但是，输出保持不变（在React版本中不会翻转）

在渲染功能中

卡

和

被翻转

是互斥的，但翻转样式的范围是

.card.被翻转

将您的卡

className

逻辑更新为：

<div className={`card ${!this.state.front && "is-flipped"}`}>

---

在渲染功能中，

卡

和

被翻转

是互斥的，但翻转的样式的范围是

.card.被翻转

将您的卡

className

逻辑更新为：

<div className={`card ${!this.state.front && "is-flipped"}`}>

<div className={`card ${!this.state.front && "is-flipped"}`}>