Question

我目前正在研究一个React学习项目。我的目的是设计带有切换菜单的边栏。我在许多人的帮助下已经完成了一半，并且已经设计好了，但是遇到了一个小问题。如果单击列表以切换菜单项，而不是单个项，则所有项都将立即展开。我无法用当前的配置解决它。请帮助我，我的代码如下，

import React, {useCallback, useState} from "react";
import {List} from "@material-ui/core";
import ListItem from "@material-ui/core/ListItem";
import {Link, useRouteMatch} from "react-router-dom";
import {Container, Row, Col, Collapse} from "react-bootstrap";
import '../Home/myStyle.css'
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";



let {url} = useRouteMatch;
export const menu = [
  {
    label: 'Technical Analysis',
    items: [
      {
        title: 'The Dow Theory',
        href: `${url}/thedowtheory`
      },
      {
        title: 'Charts & Chart Patterns',
        href: `${url}/charts`
      },
      {
        title: 'Trends & Trendlines',
        href: `${url}/trends`
      },
      {
        title: 'Support & Resistance',
        href: `${url}/support`
      }
    ]
  },
  {
    label: 'Fundamental Analysis',
    items: [
      {
        title: 'Link',
        href: `${url}/thedowtheory`
      },
      {
        title: 'Link',
        href: `${url}/charts`
      },
      {
        title: 'Link',
        href: `${url}/trends`
      },
      {
        title: 'Link',
        href: `${url}/support`
      }
    ]
  }
]


export const Sidebar = () => {
  const [open, setOpen] = useState(false);
  const clickHandler = useCallback(
    () => setOpen(open => !open),
    [setOpen]
  );

  return (
    <Container>
      <Row>
        <Col>
          {menu.map((item, index) =>
            <ul key={index}
                className="p-0"
            >
              <div onClick={clickHandler}
                   aria-controls={`menu${index}`}
                   aria-expanded={open}
              >
                <Link style={{textDecoration: "none", color: "black"}}>
                  {open ? '-' + ' ' + item.label : '+' + ' ' + item.label}
                </Link>
                {item.items.map((item, index) =>
                  <Collapse in={open}>
                    <div id={`menu${index}`}>
                      <ul className="list-unstyled border-left p-1 pl-3">
                        <li>
                          <Link key={index}
                                to={item.href}
                                style={{textDecoration: "none"}}
                          >
                            {item.title}
                          </Link>
                        </li>
                      </ul>
                    </div>
                  </Collapse>
                )}
              </div>
              <hr/>
            </ul>
          )}
        </Col>

        <Col xs={7} className="border-left">Content</Col>
        <Col className="border-left">Sidebar</Col>
      </Row>
    </Container>
  );
}

Answer 1

希望我能正确理解您要实现的目标。

单击某个项目时，您将设置一个通用的打开状态，因此在渲染时，您将不知道哪个项目完全打开。

我要做的是，将ID | |设为打开状态，而不是具有布尔标志。空类型。初始状态为null（不展开任何项目），并且每次单击时，您都将状态设置为页面的标识符。

渲染时，您将检查open是否等于您正在执行的循环中的当前项目，而不是检查open是否为true。

"requestBased": {
    "goodTotalRatio": {
      "totalServiceFilter": "metric.type=\"appengine.googleapis.com/http/server/response_count\" resource.type=\"gae_app\" resource.label.\"module_id\"=\"default\"",
      "goodServiceFilter": "metric.type=\"appengine.googleapis.com/http/server/response_count\" resource.type=\"gae_app\" resource.label.\"module_id\"=\"default\" metric.label.\"response_code\"=\"200\"",
    }
  }

上面的代码不会编译，但是应该可以指导您。

使用Reactjs切换侧边栏菜单

1 个答案: