Най-добрият начин да проектирате компонентите на React.js без CSS - javascript, facebook, reactjs

Създавам библиотека на моите компоненти с React.js. По някакви причини не искам да използвам CSS за стайлинг. Вместо него използвам стил на нотация JSON, като

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

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

Чрез deisgn, 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, бих могъл да използвам това поведение. Лоша идея ли е или не?

Отговори:

Намирам това за чист начин да се справите с промените в стила на ховър за компонент:

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
}
};