默认情况下，根据ID打开可折叠菜单

Question

我正在制作一个嵌套菜单和子菜单，到目前为止，所有操作都已完成。现在，我需要使此可折叠菜单根据给定的ID默认打开。。

可折叠菜单和子菜单的生成被分成几个部分，并且一切正常。

您也可以在工作中查看下面的代码片段，

const loadMenu = () => Promise.resolve([{id:"1",name:"One",children:[{id:"1.1",name:"One - one",children:[{id:"1.1.1",name:"One - one - one"},{id:"1.1.2",name:"One - one - two"},{id:"1.1.3",name:"One - one - three"}]}]},{id:"2",name:"Two",children:[{id:"2.1",name:"Two - one"}]},{id:"3",name:"Three",children:[{id:"3.1",name:"Three - one",children:[{id:"3.1.1",name:"Three - one - one",children:[{id:"3.1.1.1",name:"Three - one - one - one",children:[{id:"3.1.1.1.1",name:"Three - one - one - one - one"}]}]}]}]},{id:"4",name:"Four"},{id:"5",name:"Five",children:[{id:"5.1",name:"Five - one"},{id:"5.2",name:"Five - two"},{id:"5.3",name:"Five - three"},{id:"5.4",name:"Five - four"}]},{id:"6",name:"Six"}]);

const openMenuId = "3.1.1.1";

const {Component, Fragment} = React;
const {Button, Collapse, Input} = Reactstrap;

class Menu extends Component {
  constructor(props) {
    super(props);
    this.state = {menuItems: []};
  }

  render() {
    return <MenuItemContainer menuItems={this.state.menuItems} />;
  }

  componentDidMount() {
    loadMenu().then(menuItems => this.setState({menuItems}));
  }
}

function MenuItemContainer(props) {
  if (!props.menuItems.length) return null;
  
  const renderMenuItem = menuItem =>
    <li key={menuItem.id}><MenuItem {...menuItem} /></li>;
    
  return <ul>{props.menuItems.map(renderMenuItem)}</ul>;
}
MenuItemContainer.defaultProps = {menuItems: []};

class MenuItem extends Component {
  constructor(props) {
    super(props);
    this.state = {isOpen: false};
    this.toggle = this.toggle.bind(this);
  }

  render() {
    let isLastChild = this.props.children ? false : true;
    return (
      <Fragment>
        <Button onClick={this.toggle}>{this.props.name}</Button>
        <Fragment>
          {isLastChild ? <Input type="checkbox" value={this.props.id} /> : ''}
        </Fragment>
        <Collapse isOpen={this.state.isOpen}>
          <MenuItemContainer menuItems={this.props.children} />
        </Collapse>
      </Fragment>
    );
  }

  toggle() {
    this.setState(({isOpen}) => ({isOpen: !isOpen}));
  }
}

ReactDOM.render(<Menu />, document.getElementById("root"));

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/8.4.1/reactstrap.min.js"></script>

<div id="root"></div>

需求：

我在父组件的const openMenuId = "3.1.1.1.1";中存储了一个id值（您可以在下面的数组变量中查看）。

如何将openMenuId "3.1.1.1.1"（在这种情况下）作为道具传递，并选中该特定子菜单，并且需要打开所有父级菜单？

即使有多个子菜单，此ID也将仅属于最后一级的子ID，因此可以确保具有一个复选框，以便需要选中此复选框，并且需要打开直到父级的菜单。

例如，。

由于openMenuId为"3.1.1.1.1"，因此很显然，需要将菜单three的最后一个子级别Three - one - one - one - one检查为openMenuId，并且复选框值在此处具有匹配项。.然后各个菜单并且子菜单需要扩展到最后一级。

这仅用于所访问页面上的默认行为，因此该用户可以退回并能够检查任何其他菜单中的其他复选框。。但是在访问该页面时，我将具有一个默认需要打开的特定ID。 。

请通过比较作为道具传递的ID来帮助我获得打开相应菜单的结果。

Answer 1

只需添加类.actve或您想要的任何其他类，然后根据需要对其进行样式设置，如果您使用的是普通的script，则添加js，然后添加document.querySelector("youElementClassOrId").classList.toggle("idOrClassYouWantToToggle")。我很高兴这会起作用

Answer 2