使用react-css-modules时如何使用queryselector定位类

Question

React-css-modules在运行时组成类名，以限制使用独立组件时的名称冲突。 棒极了。 但是一旦加载了DOM并且你需要为动画定位一个类，例如，css-modules出现的类名在某些方面是随机的。

如何解决这个问题？

Answer 1

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

Answer 2

根据react-css-modules官方文档 ，您可以像bellow一样定位类

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

Answer 3

因此，当我需要多个类时，我最终使用classNames npm模块向元素添加和删除类。 像这样工作：

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

<button className={myClasses} />