仅切换Reactjs中单击的菜单

Question

我正在使用recursion function制作菜单和子菜单，我需要帮助才能仅打开各自的菜单和子菜单。

用于按钮和折叠Reactstrap。

执行菜单填充的递归函数：

{this.state.menuItems &&
          this.state.menuItems.map((item, index) => {
            return (
              <div key={item.id}>
                <Button onClick={this.toggle.bind(this)}> {item.name} </Button>
                <Collapse isOpen={this.state.isToggleOpen}>
                  {this.buildMenu(item.children)}
                </Collapse>
              </div>
            );
          })}

以及buildMenu函数如下，

  buildMenu(items) {
    return (
      <ul>
        {items &&
          items.map(item => (
            <li key={item.id}>
              <div>
                {this.state.isToggleOpen}
                <Button onClick={this.toggle.bind(this)}> {item.name} </Button>
                <Collapse isOpen={this.state.isToggleOpen}>
                  {item.children && item.children.length > 0
                    ? this.buildMenu(item.children)
                    : null}
                </Collapse>
              </div>
            </li>
          ))}
      </ul>
    );
  }

到目前为止，代码没有问题，但是我需要帮助来逐步打开和关闭各个级别的menu -> submenu -> submenu。

工作示例：https://codesandbox.io/s/reactstrap-accordion-9epsp

您可以看一下这个示例，当您单击任何菜单时，整个菜单级别将打开，而不是单击一个菜单。

需求

如果用户单击菜单One，则子菜单（子级）

-> One-One 

需要打开。

然后如果用户单击One-One，

 ->   One-One-One
 ->   One - one - two
 ->   One - one - three

需要打开。

同样，它是嵌套的，因此在单击任何菜单/子菜单后，需要打开它们各自的下一级。

我是反应式和反应式设计的新手，因此，专业知识的任何帮助对我来说都是有益的，以了解并实际需要完成它。

Answer 1

您将需要创建一个内部组件来管理每个级别的状态。

例如，考虑以下功能组件（我将留给您以转换为类组件）：

const MenuButton = ({ name, children }) => {
  const [open, setOpen] = useState(false);
  const toggle = useCallback(() => setOpen(o => !o), [setOpen]);
  return (
    <>
      <Button onClick={toggle}>{name}</Button>
      <Collapse open={open}>{children}</Collapse>
    </>
  );
};

此组件将管理是否显示其子级。用它代替所有<div><Button/><Collapse/></div>部分，它将管理每个级别的打开状态。
将共享状态保留在顶部，但是如果您不需要知道是否为其他逻辑扩展了某些内容，请使其保持本地化。
[此外，如果您确实需要父组件中的该信息，请使用已有的预定义对象，并在其中添加一个'open'字段，默认为false。单击后，该对象上的setState可以正确标记相应的对象以使其在打开时具有true参数。
不过，本地化状态要干净得多。