如何在使用react-css-modules时使用queryselector将类作为目标

Question

React-css-modules动态生成类名，以限制使用独立组件时的名称冲突。这太棒了。但是，一旦加载了DOM，并且您需要将一个类作为动画的目标，那么css-module产生的类名就会被分成几个部分随机化。

该怎么做呢？

Answer 1

根据react-css-modules official doc的说法，你可以像bellow这样的目标类

render() {
    const animated = this.props.styles['animated']
    return <div className={animated}>something</div>
}

Answer 2

react不需要查询选择器，只需将ref附加到您想要的元素，您就可以在react组件的任何函数中访问它。https://facebook.github.io/react/docs/more-about-refs.html

Answer 3

因此，当我需要多个类时，我最终使用classNames npm module向元素添加和删除类。其工作原理如下：

let myClasses = classNames({
  'button': true,
  'special': this.state.special
})

<button className={myClasses} />