Реагировать-вебпак. Обновите className с помощью css-loader

Насколько я понял, к элементу можно добавить только один класс, выполнив 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) для управления стилем элемента. 

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

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

webpack reactjs css-loader webpack-2
person volna    schedule 01.03.2017    source источник
comment
Вы можете сделать element.classList.toggle(className) непосредственно в своем обработчике кликов или в componentDidMount, однако вы потеряете преимущества модели декларативного программирования Reacts, поэтому получите контроль от React.   -  person riscarrott    schedule 02.03.2017
comment
@riscarrott, так с твоей точки зрения, будет лучше оставить как есть?   -  person volna    schedule 02.03.2017

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете использовать действительно потрясающий пакет classnames, который позволяет вам легко иметь несколько классов. Я не уверен в вашей конечной цели, но было бы легко сделать что-то вроде:

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

https://github.com/JedWatson/classnames

person Chris    schedule 02.03.2017