Question

我正在使用React版本16.6.3。我需要一些帮助来实现边栏中的活动菜单项。我需要做这一件事：当用户单击侧边栏中的任何<li>时，<li>必须处于活动状态（例如，它变为类“ active”）。

如果<li>处于活动状态并具有treeview类，则在其中将其设置为<ul>类“显示”（如果有）

代码如下：

import React , { Component } from "react"

export default class Sidebar extends Component {
  constructor(props) {
    super(props);
    this.state = { 'activeItem': 0 }
  }
  render() {
    return (
      <div className="main-sidebar">
        <section className="sidebar">
          <ul className="sidebar-menu tree">
            <li className="nav-divider"></li>
            <li className="header">PERSONAL</li>

            <li>
              <a href="#">
                <span>Dashboard</span>
              </a>
            </li>

            <li className="treeview">
              <a href="#">
                <span>Application</span>
              </a>
              <ul class="treeview-menu">
                <li><a href="">Chat app</a></li>
                <li><a href="">Project</a></li>
                <li><a href="">Contact / Employee</a></li>
              </ul>
            </li>

            <li className="treeview">
              <a href="#">
                <span>Application</span>
              </a>
            </li>
          </ul>
        </section>
      </div>
    )
  }
}

Answer 1

您应该问自己的第一个问题是（如果不是总是）如何存储用户选择的数据。您可能有多个activeItem，因为这是一棵树，例如。多个分支可以同时打开或关闭。您需要先寻找一种数据结构来保持这种想法。

这很简单，为每个项目指定一个ID /密钥<li key="1-0-0">，然后您可以跟踪此onChange的{{1}}事件，然后在li内使用平面数组结构，用于存储此简单树的当前状态。例如，onChange

有很多方法可以处理数据，上面的方法是一个入门的简单想法。然后，根据捕获的数据，您可以更新每个节点的子级属性。 {'1-0-0': true }假设<li className={ getNodeAttr('1-0-0')>是一个实用函数，它根据节点名称将类名字符串还给您。

Answer 2

您不应在导航侧边栏上绑定活动状态，因为如果用户直接在浏览器中输入路线，则菜单项将不会突出显示。相反，请尝试使用NavLink将活动状态绑定到路由（如果您使用react-router）：

ref：https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/NavLink.js

边栏中的React工具活动菜单项

2 个答案: