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

【问题标题】：How to target classes with queryselector when using react-css-modules使用 react-css-modules 时如何使用 queryselector 定位类
【发布时间】：2017-01-18 05:43:09
【问题描述】：

React-css-modules 在使用独立组件时即时组成类名以限制名称冲突。棒极了。但是，一旦加载了 DOM，并且您需要为动画指定一个类，例如，css-modules 提供的类名部分是随机的。

这个怎么办？

【问题讨论】：

标签： javascript css reactjs react-css-modules

【解决方案1】：

所以我最终使用了classNames npm module 当我需要多个类时向一个元素添加和删除类。像这样工作：

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

<button className={myClasses} />

【讨论】：

【解决方案2】：

根据react-css-modules official doc，您可以像下面这样定位类

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

【讨论】：

【解决方案3】：

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

【讨论】：