CSS 转换在转换为 React 代码时不再起作用：答案

【问题标题】：CSS transformation ceases to function when translated to React code:CSS 转换在转换为 React 代码时不再起作用：
【发布时间】：2018-11-19 23:17:39
【问题描述】：

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

https://codepen.io/desandro/pen/LmWoWe

<div class="scene scene--card">
  <div class="card">
    <div class="card__face card__face--front">front</div>
    <div class="card__face card__face--back">back</div>
  </div>
</div>
<p>Click card to flip.</p>

这里变成了一个 React 等价物，但它不再起作用了。

http://jsfiddle.net/95qeyhm0/

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      front: true
    }
  }

  clickHandler = () => {
    this.setState((prevState) => {
      return {front: !prevState.front};
    });
  }

  render() {
    alert('render called: ' + this.state.front)
    return (

    <div className="scene scene--card" onClick={this.clickHandler}>
      <div className={!this.state.front ? 'card' : 'is-flipped'}>
        <div className="card__face card__face--front">front</div>
        <div className="card__face card__face--back">back</div>
      </div>
    </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))

我验证了状态在 true 和 false 之间切换，但我使用 Chrome 检查器来验证 className 也正在切换。

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

【问题讨论】：

标签： javascript css reactjs transform

【解决方案1】：

在您的渲染函数中，card 和 is-flipped 是互斥的，但您的翻转样式的范围为 .card.is-flipped。

将您的卡className 逻辑更新为：

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

Updated Fiddle

【讨论】：