javascript - 在没有 CSS 的情况下设计 React.js 组件的最佳方式

Question

我正在使用 React.js 构建我的组件库。由于某些原因，我不想使用 CSS 进行样式设置。取而代之的是，我使用的是 JSON 符号样式，例如

{
  "some-class": {
    "color": "#755755"
  },

  "some-class:hover": {
    "background": "#CCC"
  }
}

根据设计，React 建议尽可能保持组件无状态，但对于 :hover 或 :active 等情况，我使用 onMouseOver 和onMouseOut:

/**
 * Mouse over handler
 * @return {Void}
 */
onMouseOver: function() {
    this.setState({
        style: extend(
            {}, 
            this.state.style, 
            style['mdui-btn-' + this.props.type + ':hover']
        )
    });
},

/**
 * Mouse out handler
 * @return {Void}
 */
onMouseOut: function() {
    this.setState({
        style: this.computeStyle()
    });
},

我假设如果我想避免使用 CSS，我可以使用这种行为。这是个坏主意吗？

Answer 1

我发现这是一种处理组件悬停样式更改的简洁方法:

var SomeComponent = React.createClass({
  getInitialState: function(){
    return {hovered: false};
  },
  toggleHovered: function(){
    this.setState({hovered: !this.state.hovered});
  }
  render: function(){
    //example for rendering a span with desired hovering functionality
    return(
      <span style={this.state.hovered ? myStyles.hoverOn : myStyles.hoverOff} onMouseOver={this.toggleHovered}> onMouseOut={this.toggleHovered}> 
        Some content 
      </span>
    );
  }
});

var myStyles = {
  hoverOn: {
    // whatever styles you want on hover
  },
  hoverOff: {
    // style for no hover
  }
};