React Web 导航栏树形菜单激活

Question

我正在开发带有下拉菜单的导航栏。一切正常，但我需要在点击时显示树菜单。问题是如何只使用户点击的菜单可见。我正在添加“活动”类名来显示它。

因此，当用户单击“产品”选项卡时，它应该只显示产品菜单，而不是同时显示每个菜单。

<nav>
  <ul>
    <li>
      <p>Nav Item1</p>
      <div className='menu active'>
        <ul>
          <li>Menu Item 1</li>
          <li>Menu Item 2</li>
          <li>Menu Item 3</li>
        </ul>
      </div>
    </li>
    <li>
      <p>Nav Item2</p>
      <div className='menu'>
        <ul>
          <li>Menu Item 1</li>
          <li>Menu Item 2</li>
          <li>Menu Item 3</li>
        </ul>
      </div>
    </li>
    <li>
      <p>Nav Item3</p>
      <div className='menu'>
        <ul>
          <li>Menu Item 1</li>
          <li>Menu Item 2</li>
          <li>Menu Item 3</li>
        </ul>
      </div>
    </li>
  </ul>
</nav>

所以每当我点击导航项目时，它应该呈现菜单。有没有简单的方法来做到这一点？或者我需要为每个导航项创建一个函数和状态变量？

Answer 1

没有代码很难回答。但是您的激活应该将可能的项目用作子项，并且仅在激活时才显示它们。

在 React 中使用类更简单的方法是直接使用布尔值。 这是可能的，因为 false 用作 null，因此不会渲染。

import * as React from 'react';

interface Props {
  tabName: string;
}

class TabAndMenu extends React.Component<Props> {
  private visible = false;

  render() {
    return 
      <><span onClick={() => this.visible = true}>{this.props.tabName}</span>
       {visible && this.props.children}
      </>
  }  
}

如果您需要更具体的帮助，您应该发布一个 jsfiddle/代码沙箱或其他向我们展示您的代码的方式。