React Hooks 响应式侧边栏答案

【问题标题】：React Hooks Responsive SidebarReact Hooks 响应式侧边栏
【发布时间】：2021-04-15 17:58:18
【问题描述】：

我想在 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>
  );
}

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

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

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

【问题讨论】：

标签： reactjs bootstrap-4 responsive-design react-sidebar

【解决方案1】：

尝试实现这个：

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

【讨论】：

感谢您的回答，但是单击按钮时所有元素都丢失了。是关于 css 的吗？（这一行 #wrapper.toggled #sidebar-wrapper ）。当我更改包装类时，我应该更改其他元素类

【解决方案2】：

我终于设法通过这样做解决了这个问题：

const [open, setOpen] = useState("");
  const hide = () => setOpen("translateX(100%)");
  const show = () => setOpen("translateX(0)");

然后将 props 从样式化组件类传递到侧边栏容器：

const SidecartContainer = styled.div`
  transform: ${(props) => props.transform};
`;

const SideCart = (props) => {
  return (
    <SidecartContainer transform={props.transform} open={props.open}>
      <ExitButton open={props.open} onClick={props.onClick}>

【讨论】：