Преобразование CSS перестает функционировать при переводе в код React:

Question

Я перевел этот код здесь:

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"))

Я проверил, что состояние переключалось между истиной и ложью, но с помощью инспектора Chrome также проверил, что className также переключается.

Однако вывод остается прежним (он не переворачивается в версии React)

Answer 1

В вашей функции рендеринга card и is-flipped являются взаимоисключающими, но ваши перевернутые стили ограничены .card.is-flipped.

Обновите вашу карточку className логика до:

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

Обновленная скрипка