Question

据我所知，即使它由许多组成，也可以通过className={styles.className}向元素添加一个类。

因此，目前代码使用ternary operator来呈现不同的元素样式，具体取决于state.cross值。

export default class Header extends Component {
  constructor(props) {
    super(props);

    this.state = { cross: false };

    this.showCross = this.showCross.bind(this);
    this.showLine = this.showLine.bind(this);
  }

  showCross() {
    this.setState({cross: true});
  }

  showLine() {
    this.setState({cross: false});
  }

  render() {
    return (
      <div onMouseEnter={this.showCross} onMouseLeave={this.showLine} className={styles.blockClose}>
        <a className={this.state.close ? styles.closeCross : styles.closeLine}>&nbsp;</a>
      </div>
    )
  }
}

在state更改并且transform已应用后，它实际上会使两条线看起来像十字架。

:local(.closeLine) {
  ...20px line

  &::before {
    ...equal line
  }
}

:local(.closeCross) {
  composes: closeLine;
  transform: rotate(-45deg);

  &::before {
    transform: rotate(90deg);
  }
}

我的问题是：

是否可以通过像element.classList.toggle(className)这样的smth来切换类来管理元素的样式，而不是条件呈现。

:local(.closeCross) {
  transform: rotate(-45deg);

  &::before {
    transform: rotate(90deg);
  }
}

Answer 1

您可以使用非常棒的类名包，它允许您轻松拥有多个类。我不确定你的最终目标，但是很容易做到这样的事情：

<a className={classNames(
    styles.closeCross, { // <-- always applied
        [styles.closeLine]: this.state.close   <-- applied only when closed
    })}
>&nbsp;</a>

https://github.com/JedWatson/classnames

反应-的WebPack。使用css-loader更新className

1 个答案: