在没有 CSS 的情况下设计 React.js 组件的最佳方法
Best way to design React.js components without CSS
我正在使用 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 我可以使用这种行为。这是个坏主意吗?
我发现这是处理组件的悬停样式更改的简洁方法:
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
}
};
我正在使用 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 我可以使用这种行为。这是个坏主意吗?
我发现这是处理组件的悬停样式更改的简洁方法:
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
}
};