Meilleure façon de concevoir des composants React.js sans CSS - javascript, facebook, reactjs

Je construis une bibliothèque de mes composants avec React.js. Pour certaines raisons, je ne veux pas utiliser CSS pour le style. Au lieu de cela, j'utilise le style de notation JSON, comme

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

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

Par deisgn, React recommande de garder les composants aussi apatrides que possible, mais pour des conditions telles que :hover ou :active j'utilise onMouseOver et 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()
});
},

Je suppose que si je veux éviter d'utiliser CSS, je pourrais utiliser ce comportement. Est-ce une mauvaise idée ou non?

Réponses:

Je trouve que c'est un moyen propre de gérer les changements de style de survol pour un composant:

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