react js中的多级下拉菜单不可用还是啥？像 react-bootstrap

Posted 2023-02-22

【中文标题】react js中的多级下拉菜单不可用还是啥？像 react-bootstrap

【英文标题】：Multi-Level Dropdown menu in react js is not available or what? Like react-bootstrapreact js中的多级下拉菜单不可用还是什么？像 react-bootstrap

【发布时间】：2020-08-14 10:15:34

【问题描述】：

我正在使用下面的

import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import NavDropdown from 'react-bootstrap/NavDropdown'

但我找不到像这样的多级下拉菜单

My-Menu
       menu-1
             menu-1-a
             menu-1-b   
       menu-2
       menu-3
            menu-3-a
            menu-3-b

“react-bootstrap”中是否有我可以使用的多级下拉菜单。

【参考方案1】：

这是你在找的吗？ http://jsfiddle.net/n5u2wwjg/233886/

class DropdownMenu extends React.Component 

  getMenuItemTitle = (menuItem, index, depthLevel) => 
    return menuItem.title;
  ;
 
  getMenuItem = (menuItem, depthLevel, index) => 
    let title = this.getMenuItemTitle(menuItem, index, depthLevel);

    if (menuItem.submenu && menuItem.submenu.length > 0) 
      return (
        <li>
          title
          <DropdownMenu config=menuItem.submenu submenu=true />
        </li>
      );
     else 
      return <li>title</li>;
    
  ;

  render = () => 
    let  config  = this.props;

    let options = [];
    config.map((item, index) => 
      options.push(this.getMenuItem(item, 0, index));
    );

    if (this.props.submenu && this.props.submenu === true)
      return <ul>options</ul>;

    return <ul className="dropdown-menu">options</ul>;
  ;



ReactDOM.render(<DropdownMenu config=[
    
      "title": "Option 1",
      "submenu": null
    ,
    
      "title": "Option 2",
      "submenu": [
        
          "title": "Option 2.1",
          "submenu": [
            
              "title": "Option 2.1.1",
              "submenu": null
            ,
            
              "title": "Option 2.1.2",
              "submenu": null
            
          ]
        ,
        
          "title": "Option 2.2",
          "submenu": [
            
              "title": "Option 2.2.1",
              "submenu": null
            ,
            
              "title": "Option 2.2.2",
              "submenu": null
            
          ]
        
      ]
    
  ]/>, document.querySelector("#app"))

.dropdown-menu 
  height: 35px;
  list-style: none;
  margin: 0;
  padding: 0;
  float: left;
  text-align: center;


.dropdown-menu li 
  display: inline-block;
  position: relative;
  float: left;
  width: 200px;
  line-height: 35px;
  text-decoration: none;


.dropdown-menu li li a 
  font-size: 12px;


.dropdown-menu li:hover 
  background: blue;



/*--- Sublist Styles ---*/

.dropdown-menu ul 
  position: absolute;
  display: none;



/*--- Hide Sub Sublists ---*/

.dropdown-menu li:hover ul ul 
  display: none;



/*--- Sublevel UL's display and position on hover ---*/

.dropdown-menu li:hover ul 
  display: block;


.dropdown-menu li li:hover ul 
  margin-left: 200px;
  /*This must be width of menu box*/
  margin-top: -35px;
  display: block;


nu-li 
  padding: 10px;


.dropdown-submenu 
  position: absolute;
  left: 0px;
  top: 0px;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.3.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.1/umd/react-dom.production.min.js"></script>
<div id="app"></div>

【讨论】：

我是新手，如何使用这个来做出反应。预计我会像 react-bootstrap 一样安装和使用。

【参考方案2】：

可以通过以下方式实现：

recursiveMenu：嵌入下拉菜单 CustomToggle：模仿原始下拉项 render：遍历 items 数组：

export const data = [
  
    "_class": "leaf",
    "name": "Node"
  ,
  
    "_class": "submenu",
    "name": "Submenu",
    "children": [
      
        "_class": "leaf",
        "name": "Node"
      ,
      
        "_class": "leaf",
        "name": "Node"
      
    ]
  
]

  const recursiveMenu = (items, parent='') => 
    return (
      items.map(
        (o, i) => o._class !== 'submenu' ? (
          <Dropdown.Item key=`$i/$o.name` onSelect=props.onSelect id=`$parent/$o.name`>o.name</Dropdown.Item>
        ) : o.children?.length > 0 ? (
          <Dropdown key=i drop='right'>
            <Dropdown.Toggle as=CustomToggle id="dropdown-basic">
              o.name
            </Dropdown.Toggle>
            <Dropdown.Menu>
              recursiveMenu(o.children, `$parent/$o.name`)
            </Dropdown.Menu>
          </Dropdown>
          ) : null
      )
    )
  

  const CustomToggle = React.forwardRef(( children, onClick , ref) => (
    <a
      className="dropdown-item dropdown-toggle"
      href=""
      ref=ref
      onMouseEnter=(e) => onClick(e)
      onClick=(e) => 
        e.preventDefault();
        onClick(e);
      
    >
      children
    </a>
  ));

  return (
    <Dropdown ref=ref>
      <Dropdown.Toggle variant="success" id="dropdown-basic">
        props.dataValue
      </Dropdown.Toggle>
      <Dropdown.Menu>
        recursiveMenu(data)
      </Dropdown.Menu>
    </Dropdown>
  )

【讨论】：

感谢@ericson.cepeda，您的解决方案确实帮助我解决了与下拉组件中的引导子菜单相关的问题。从过去的 2 个月开始，我一直在寻找一个完美的解决方案。我想知道，您是如何找到修复的，因为 react-bootstrap 中有许多组件可能需要一些自定义功能。我无法在 react-bootstrap 文档中找到任何解决方案，说明如何根据需要向组件添加自定义功能。

@vaibhavnaik，反复试验和“保持简单”。在尝试了不同的库但没有成功后，我意识到其他人通常会尝试嵌套组件。然后，我考虑简化我自己的实现，同时想知道如果 Dropdown 元素嵌套会发生什么。最后，它奏效了。

【参考方案3】：

您可以使用一些软件包来实现这一点，希望它可以帮助某人做出多级下拉菜单以做出反应 https://github.com/SUPPLYcom/react-mega-menu 这个包。

import ReactMegaMenu from "react-mega-menu"

<ReactMegaMenu 
   tolerance=50      // optional, defaults to 100
   direction="LEFT"  
   styleConfig=...  
   onExit=()=>...
   data=[
  
     label: "Category1",
     key: "Category1",
     items: "Category1 content"
  ,
  
     label: "Category2",
     key: "Category2",
     items: "Category2 content"
  ,
  
     label: "Category3",
     key: "Category3",
     items: "Category3 content"
   
 ]        // array of data to be rendered
/>

演示应该是这样的 -

最终输出可能是这样的

希望，它可以帮助某人。