Reactでフローティングメニューを実装する方法

class UserMenu extends React.Component{ constructor(props){ super(props), this.state={ modalIsOpen:'none', atUserItems:false, } this.contentBtn=this.contentBtn.bind(this), this.programBtn=this.programBtn.bind(this), this.handleMouseOver = this.handleMouseOver.bind(this); this.handleMouseOut = this.handleMouseOut.bind(this); this.userCenter = this.userCenter.bind(this); this.handleMouseUserOver = this.handleMouseUserOver.bind(this); } contentBtn(){ this.context.router.history.push("/details"); } programBtn(){ this.context.router.history.push("/gui"); } handleMouseOver(e){ this.setState({ modalIsOpen: 'block', }) } handleMouseOut(){ this.setState({ modalIsOpen: 'none', }) } handleMouseUserOver(e){ this.setState({ modalIsOpen: 'block', }) } userCenter(){ this.setState({ modalIsOpen: 'none', }) } render(){ const {username} = this.props; return( 
 
{username}
 
 
 
个人中心
 
账号设置
 
注销
 
 
 
 ) } } UserMenu.contextTypes = { router: PropTypes.object.isRequired }; export default UserMenu

.body{ position:relative } .menus{ display:none; position:absolute; right: 0; z-index:999; } .uname{ color: white; margin-left: 5px; margin-right: 10px; cursor: pointer; padding-top: 25px; padding-bottom: 20px; padding-left: 5px; } .uname:hover{ color: darkorange; } .ul{ width: 120px; background-color: #fff; padding: 10px; border-radius: 8px; -webkit-box-shadow: 0 5px 10px 0 rgba(12,40,46,0.20); box-shadow: 0 5px 10px 0 rgba(12,40,46,0.20); } .li{ list-style: none; height: 40px; display: list-item; cursor: pointer; } .li:hover{ color: darkorange; }