简短的问题:看起来应用程序的状态可以从 React/Flux 商店完全序列化。我已经在输入值和其他东西中看到了这一点,但是动画或悬停效果是什么?我应该使用经典的:hover
CSS 选择器来实现悬停效果,还是应该使用 mouseenter 和 -leave 事件并将悬停状态保存在我的商店中?
Reacts/Flux 的存储应该是 GUI 整个状态的快照吗?
IT技术
reactjs
flux
2021-05-21 16:39:43
1个回答
如果您的悬停效果很小,例如光标上的指针等,我将主要使用 CSS。如果你想做更大的 DOM 操作,我会使用React
. 您不应该使用 store 来确定组件的状态,它应该只在操作发生后将数据分发给组件。这意味着它是组件应该知道它当前处于哪种状态,然后确定应该发生什么。这是一个带有“哑”组件的小示例,除了它自己的状态外,它没有任何类型的数据更新。
var SmallTooltip = React.createClass({
getInitialState: function () {
return {
showTooltip: false
};
},
onMouseEnter: function () {
this.setState({
showTooltip: true
});
},
onMouseLeave: function () {
this.setState({
showTooltip: false
});
},
render: function () {
var toolTipClass = !this.state.showTooltip ? 'tooltip hidden' : 'tooltip';
return (
<span onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} className='someCoolWrapperClass'>
<span className={toolTipClass}>
This is shown when you hover over the span
</span>
</span>
);
}
});
您可以轻松地发送数据并在此组件中进行其他数据操作,使其成为更智能的组件。