javascript - 如何在 ReactJS 中创建和应用基于 CSS 类的动态样式表？

Question

是否有任何标准方法可以使用 ReactJS 将基于 CSS 类的动态样式表添加到 DOM 中(我不是在谈论内联样式)？

我知道我可以使用标准的 JavaScript 或 jQuery 来做到这一点，这可能在 componentDidMount 生命周期事件中是最好的，但我很好奇是否有任何标准的方法可以纯粹使用 React 来做到这一点，这也尽可能地减少了 DOM 突变。

另请注意，我是在不使用 nodejs 的简单 Web 应用程序的上下文中谈论的。

Answer 1

recommended way 就是用classnames .它是一个函数，它接受一个由真或假键组成的对象，并返回一个仅包含真键的字符串。

所以你会做这样的事情:

...
import cx from 'classnames';

const MyComponent = React.createClass({
   propTypes: {
      isVisible: React.PropTypes.bool
   },

   render() {
      let classes = cx({
                css-class: true,
                css-visible: !!this.props.isVisible   
             });

      return (
              <div className={classes}>
                 Hello World!
              </div>
      )
   }
});

这将创建一个获取 css 类 css-class 和 css-visible 的 div，但是 css-visible 只会被应用如果 this.props.isVisible 存在或为真。

更新:包含 css 属性本身。

...
render() {
   let styles = { "border": "1px solid black" };

   return (
      <div style={styles}>
        Hello World!
      </div>
   );
}