在React中创建悬停效果菜单

Question

我需要制作一个滑出式菜单，类似于这些图片中的一个：

编辑：我尝试使用css但我的侧栏不会出现，这是我的css代码：

.SideBar{
position: absolute;
left: -80px;
transition: 0.4s;
width: 80px;
font-size: 15px;
color: white;
transition: 0.3s

}     .SideBar:hover{ left: 0; }

Answer 1

使用OnHover，然后何时将悬停，更改状态。在改变状态之后你可以使用条件。

类似的东西：

render() {
    return (
        <div>(this.state.isHovered) ? (<a>openedmenu</a>) :(<a onHover={this.hover.bind(this)}>closed menu</a>)</div>
     )
}


hover() {
this.setState({isHovered:true})
}

然后你可以通过自己进行实验