如何解决if-else在scss中不起作用
我正在使用样式文件.scss进行React这个项目。而且我想实现此切换和导航栏,如果单击它,应将其更改为打开状态,反之亦然,但是我无法确定问题是由于react还是if-else条件。
这是我的反应代码:
import React,{ useState } from 'react';
const Burger = () => {
const [open,setOpen] = useState(false)
return (
<>
<div className={styles['burger']} open={open} onClick={() => setOpen(!open)}>
<div />
<div />
<div />
</div>
<RightNav open={open} />
</>
)
}
这是我的.scss代码:
&:nth-child(1) {
$type: open;
@if $type == open {
transform: rotate(45deg);
} @else{
transform: rotate(0);
}
}
&:nth-child(2) {
$type: open;
@if $type == open {
transform: translateX(100%);
opacity: 0;
} @else{
transform: translateX(0);
opacity: 1;
}
}
&:nth-child(3) {
$type: open;
@if $type == open {
transform: rotate(-45deg);
} @else{
transform: rotate(0);
}
}
我的代码有什么作用?它运行,导航栏保持打开状态,此代码用于制作汉堡包按钮和十字按钮。因此,这只是停留在十字形按钮中,而单击导航栏则保持打开状态。
解决方法
您不能在scss文件中使用react状态。
一种解决方案是,当组件状态is-open
为true时,向带有burger
类的div中添加另一个类open
。
<div className={`burger ${open ? 'is-open': '' }`} onClick={() => setOpen(!open)}>
并在is-open
类中将burger
类添加到div中时,为子元素添加样式。
.burger {
div {
&:nth-child(1) {
transform: rotate(0);
}
&:nth-child(2) {
transform: translateX(0);
opacity: 1;
}
&:nth-child(3) {
transform: rotate(0);
}
}
&.is-open {
div {
&:nth-child(1) {
transform: rotate(45deg);
}
&:nth-child(2) {
transform: translateX(100%);
opacity: 0;
}
&:nth-child(3) {
transform: rotate(-45deg);
}
}
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。