时间戳

首页 > 解决方案 > CSS 转换在转换为 React 代码时不再起作用：

javascript - CSS 转换在转换为 React 代码时不再起作用：

问题描述

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

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 版本中翻转）

标签： javascriptcssreactjstransform

解决方案

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

将您的卡className逻辑更新为：

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

更新小提琴

推荐阅读