React Hooks 响应式侧边栏

如何解决React Hooks 响应式侧边栏

我想在 React 中开发一个响应式侧边栏。我以https://startbootstrap.com/template/simple-sidebar模板为例，可以在block1中使用：

块 1：

function App() {
 
  useEffect(() => {
    $("#menu-toggle").click(function (e) {
      e.preventDefault();
      $("#wrapper").toggleClass("toggled");
    });
  },[]);

  return (
    <div class="d-flex" id="wrapper">
      <div class="bg-light border-right" id="sidebar-wrapper">
        <div class="sidebar-heading">Start Bootstrap</div>
        <div class="list-group list-group-flush">
          <a href="#" class="list-group-item list-group-item-action bg-light">
            Dashboard
          </a>
        </div>
      </div>
      <div id="page-content-wrapper">
        <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
          <button class="btn btn-primary" id="menu-toggle">
            Toggle Menu
          </button>
        </nav>

        <div class="container-fluid"></div>
      </div>
    </div>
  );
}

当我尝试将其转换为纯 React 时，页面无法成功运行。某些元素丢失了。

块 2：

function App() {
  const [isActive,setActive] = useState(false);
  const className = isActive ? "toggled" : "d-flex";

  const handletoggle = () => {
    setActive(!isActive);
  };

  return (
    <div class={className} id="wrapper">
      <div class="bg-light border-right" id="sidebar-wrapper">
        <div class="sidebar-heading">Start Bootstrap</div>
        <div class="list-group list-group-flush">
          <a href="#" class="list-group-item list-group-item-action bg-light">
            Dashboard
          </a>
        </div>
      </div>
      <div id="page-content-wrapper">
        <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
          <button
            class="btn btn-primary"
            id="menu-toggle"
            onClick={() => handletoggle()}
          >
            Toggle Menu
          </button>
        </nav>

        <div class="container-fluid"></div>
      </div>
    </div>
  );
}

App.css

#wrapper {
  overflow-x: hidden;
}

#sidebar-wrapper {
  min-height: 100vh;
  margin-left: -15rem;
  -webkit-transition: margin 0.25s ease-out;
  -moz-transition: margin 0.25s ease-out;
  -o-transition: margin 0.25s ease-out;
  transition: margin 0.25s ease-out;
}

#sidebar-wrapper .sidebar-heading {
  padding: 0.875rem 1.25rem;
  font-size: 1.2rem;
}

#sidebar-wrapper .list-group {
  width: 15rem;
}

#page-content-wrapper {
  min-width: 100vw;
}

#wrapper.toggled #sidebar-wrapper {
  margin-left: 0;
}

@media (min-width: 768px) {
  #sidebar-wrapper {
    margin-left: 0;
  }

  #page-content-wrapper {
    min-width: 0;
    width: 100%;
  }

  #wrapper.toggled #sidebar-wrapper {
    margin-left: -15rem;
  }
}

我找不到我错过的地方。 你能帮我吗？

解决方法

尝试实现这个：

const [isActive,setActive] = useState(false);
const className = isActive ? "toggled" : "d-flex";

像这样：

const [isActive,setActive] = useState(false);
const [className,setClassName] = useState('d-flex');

useEffect(() => {
    if (isActive) setClassName('toggled');
    else setClassName('d-flex');
},[isActive]);