if-else 不能在 scss 中使用 react

Question

我正在使用样式文件 .scss 处理这个 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);
  }
}

我的代码有什么作用？它运行并且导航栏保持打开状态，此代码用于制作汉堡包按钮和十字按钮。所以，这只是停留在一个十字按钮中，点击导航栏保持打开状态。

Answer 1

你不能在 scss 文件中使用反应状态。

一个解决方案是当组件状态 open 为真时，将另一个 class is-open 添加到带有 burger class 的 div .

<div className={`burger ${open ? 'is-open': '' }`} onClick={() => setOpen(!open)}>

并在 is-open class 添加到 div 和 burger class 时为子元素添加样式。

.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);
      }
    }
  }
}

if-else 不能在 scss 中使用 react

if-else is not working in scss with react

css

sass

web

reactjs

responsive