Semantic UI React多级（嵌套）菜单动态组件显示异常求助

Hey there! Let's tackle this nested dynamic menu issue with Semantic UI React. I’ve dealt with similar headaches before, so let’s break this down step by step to get your menu working properly.

The biggest gap between static and dynamic nested menus usually comes down to recursive rendering logic and proper state management for expand/collapse behavior—easy details to overlook when you’re moving from hardcoded items to dynamic data.

Step 1: Align Your Data Structure #

First, let’s assume your sample data follows this typical nested format (adjust if your structure differs):

const menuData = [
  {
    key: 'home',
    name: 'Home',
    path: '/'
  },
  {
    key: 'products',
    name: 'Products',
    children: [
      {
        key: 'electronics',
        name: 'Electronics',
        children: [
          { key: 'phones', name: 'Phones', path: '/products/electronics/phones' },
          { key: 'laptops', name: 'Laptops', path: '/products/electronics/laptops' }
        ]
      },
      {
        key: 'clothing',
        name: 'Clothing',
        path: '/products/clothing'
      }
    ]
  },
  {
    key: 'about',
    name: 'About Us',
    path: '/about'
  }
];

Step 2: Build a Recursive Menu Component #

Semantic UI React doesn’t have a built-in nested menu component, so we’ll create a recursive component to handle nested items automatically. This implementation includes state for toggling submenus:

import React, { useState } from 'react';
import { Menu, Icon } from 'semantic-ui-react';

// Recursive component for individual menu items (including nested ones)
const NestedMenuItem = ({ item }) => {
  const [isExpanded, setIsExpanded] = useState(false);

  const toggleSubmenu = () => setIsExpanded(!isExpanded);

  // Render a simple item if there are no children
  if (!item.children) {
    return (
      <Menu.Item key={item.key} as='a' href={item.path}>
        {item.name}
      </Menu.Item>
    );
  }

  // Render a parent item with a collapsible submenu if children exist
  return (
    <Menu.Item key={item.key}>
      <span onClick={toggleSubmenu} style={{ cursor: 'pointer' }}>
        {item.name}
        <Icon name={isExpanded ? 'chevron down' : 'chevron right'} />
      </span>
      <Menu.Menu visible={isExpanded} style={{ marginLeft: '1.5em' }}>
        {item.children.map(child => (
          <NestedMenuItem key={child.key} item={child} />
        ))}
      </Menu.Menu>
    </Menu.Item>
  );
};

// Main menu wrapper to render all top-level items
const DynamicNestedMenu = ({ menuData }) => {
  return (
    <Menu vertical>
      {menuData.map(item => (
        <NestedMenuItem key={item.key} item={item} />
      ))}
    </Menu>
  );
};

// Example usage
export default function App() {
  return <DynamicNestedMenu menuData={menuData} />;
}

Step 3: Troubleshoot Common Issues #

If your menu still isn’t displaying right, check these frequent pitfalls:

• Missing Unique Keys: Always pass a unique key prop to every menu item (use your data’s key field, never array indexes—this breaks React’s rendering optimizations).
• Submenu Visibility: Semantic UI React’s Menu.Menu relies on the visible prop to show/hide submenus. Make sure this is tied to a state variable (like isExpanded in the example).
• Forgotten Recursion: If child items aren’t showing up, double-check that your component checks for item.children and recursively renders the nested component for each child.
• Styling Misalignment: Nested menus might look flat by default—add a marginLeft or paddingLeft to the inner Menu.Menu to create visual hierarchy.

Step 4: Optional: Controlled Expand/Collapse (For Parent State Management) #

If you need to control submenu state from a parent component (e.g., for syncing with URL params), lift the state up like this:

// Parent component manages expanded submenu keys
const DynamicNestedMenu = ({ menuData, expandedKeys, setExpandedKeys }) => {
  const toggleSubmenu = (key) => {
    setExpandedKeys(prev => 
      prev.includes(key) ? prev.filter(k => k !== key) : [...prev, key]
    );
  };

  // Update NestedMenuItem to accept expandedKeys and toggleSubmenu as props
  // ...
};

This should resolve most common issues with dynamic nested menus in Semantic UI React. If you’re hitting a specific error or unexpected behavior, feel free to share more details about your code!

内容的提问来源于stack exchange，提问作者Mushfiq