if-else 不能在 scss 中使用 react答案

【问题标题】：if-else is not working in scss with reactif-else 不能在 scss 中使用 react
【发布时间】：2021-01-11 18:37:06
【问题描述】：

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

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

【问题讨论】：

scss 文件中的变量open 是从哪里传来的？是来自反应状态吗？
是的，它是从反应状态传递过来的。

标签： css reactjs web sass responsive

【解决方案1】：

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

一种解决方案是当您的组件状态 open 为 true 时，将另一个类 is-open 添加到具有 burger 类的 div。

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

【讨论】：