Najlepší spôsob, ako navrhnúť komponenty React.js bez CSS - javascript, Facebook, reajs

Staviam knižnicu svojich komponentov pomocou React.js. Z nejakých dôvodov nechcem používať CSS na styling. Namiesto toho používam napríklad štýl zápisu JSON

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

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

Reagovaním spoločnosti React odporúča udržiavať komponenty čo najviac bez štátnej príslušnosti, ale za takých podmienok, ako je napr :hover alebo :active používam onMouseOver a 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()
});
},

Predpokladám, že ak sa chcem vyhnúť použitiu CSS, mohol by som použiť toto správanie. Je to zlý nápad alebo nie?

odpovede:

Považujem to za čistý spôsob spracovania zmien štýlu vznášania pre komponent:

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