css - React Web 导航栏树菜单激活

Question

我正在开发带有下拉菜单的 NavBar。一切正常，但我需要在单击时显示树菜单。问题是如何只显示用户单击的菜单。我正在添加“事件”类名来显示它。

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

<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>

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

Answer 1

没有代码很难回答。但是您的激活应该使用可能的元素作为 child ，并且只在激活时显示它们。

在 React 中使用类更简单的方法是直接使用 bool 值。 这是可能的，因为 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/代码沙箱或其他向我们展示您的代码的方式。