点击React.js时不会显示下拉菜单

Question

你好，所以我有一个问题，当我点击导航栏图标时，它应该打开一个下拉列表，所以当我点击它时，它会更改div名称，但css道具保持初始div类，任何人都可以帮助我，我不知道我在哪里做错了，我认为它应该在上工作

<div className='action'>
<div className='profile' onClick={this.menuToggle}>
<img src={Avatar} alt="Avatar" />
</div>
<div className={`menuDropdown ${active ? "active" : ""}`}>
<ul>
<li><a href='#' />Ver Perfil</li>
<li><a href='#' />Logout</li>
</ul>
</div>
</div>

class NavBarClient extends Component {
constructor() {
super();
this.state = {
active: false
};
}

menuToggle = () => {
this.setState({ active: !this.state.active });
}
render() {
const { active } = this.state;

.menuDropdown{
position: absolute;
top: 120px;
right: -10px;
padding: 10px 20px;
background-color: #fff;
width: 200px;
box-sizing: 0 5px 25px rgba(0,0,0,0.1);
border-radius: 15px;
transition: 0.5s;
visibility: hidden;
opacity: 0;
.active{
top:80px;
visibility: visible;
opacity: 1;
}

}

Answer 1

在css文件中，您应该从.menuDropdown对象中获取.activecss对象。

.menuDropdown{
position: absolute;
top: 120px;
right: -10px;
padding: 10px 20px;
background-color: #fff;
width: 200px;
box-sizing: 0 5px 25px rgba(0,0,0,0.1);
border-radius: 15px;
transition: 0.5s;
visibility: hidden;
opacity: 0;
}
.active{
top:80px;
visibility: visible;
opacity: 1;
}