反应网络包。使用 css-loader 更新类名

Question

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

因此目前代码使用 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 之后使 2 行看起来像十字。

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

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

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

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

我的问题是：

是否可以通过像 element.classList.toggle(className) 这样的操作来切换 class 来管理元素的样式，而不是条件渲染。

: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

反应网络包。使用 css-loader 更新类名

React-Webpack. Update className with css-loader

reactjs

webpack

webpack-2

css-loader