基于React.js实现下拉菜单SlideToggle滑动切换功能

Hey Jonca33, nice work getting the core dropdown functionality (click to show/hide, click outside to close) up and running! Translating jQuery's slideToggle to React is totally straightforward once you know the right patterns—let's walk through a couple of solid approaches.

Approach 1: CSS Transitions (No Extra Dependencies) #

This is my go-to for simple slide animations because it's lightweight and plays nicely with React's state system. The trick is using max-height (since height: auto can't be animated) and toggling a class based on your dropdown's open/closed state.

Step 1: Keep Your Existing State & Logic #

You probably already have a state variable tracking if the dropdown is open, plus click-outside handling—keep that intact:

import { useState, useRef, useEffect } from 'react';

function Dropdown() {
  const [isOpen, setIsOpen] = useState(false);
  const dropdownRef = useRef(null); // For click-outside detection

  // Toggle dropdown on button click
  const handleToggle = () => setIsOpen(!isOpen);

  // Close dropdown when clicking outside
  useEffect(() => {
    const handleClickOutside = (e) => {
      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
        setIsOpen(false);
      }
    };
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  // ... rest of your component
}

Step 2: Add Animation Styles with CSS #

Define transition styles for your menu. We'll use max-height to simulate a smooth slide effect:

.dropdown-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out; /* Adjust duration to your preference */
  /* Add your existing menu styles (padding, background, borders) here */
}

.dropdown-menu.open {
  max-height: 300px; /* Set a value larger than your menu's maximum possible height */
}

Step 3: Toggle the Animation Class in JSX #

Apply the open class conditionally based on your isOpen state:

<div ref={dropdownRef} className="dropdown-container">
  <button onClick={handleToggle}>Toggle Dropdown</button>
  <div className={`dropdown-menu ${isOpen ? 'open' : ''}`}>
    {/* Your menu items go here */}
    <a href="#">Item 1</a>
    <a href="#">Item 2</a>
    <a href="#">Item 3</a>
  </div>
</div>

That's it! When isOpen switches to true, the menu slides down automatically; when it switches back, it slides up.

Approach 2: Dynamic Height Calculation (For Variable-Height Menus) #

If your menu's height changes dynamically (e.g., dynamic content), a fixed max-height might feel clunky. Instead, calculate the menu's actual height using a ref:

function Dropdown() {
  const [isOpen, setIsOpen] = useState(false);
  const [menuHeight, setMenuHeight] = useState(0);
  const menuRef = useRef(null);
  const dropdownRef = useRef(null);

  useEffect(() => {
    if (isOpen) {
      // When opening, set height to the menu's actual scroll height
      setMenuHeight(menuRef.current.scrollHeight);
    } else {
      // When closing, first set height to current scroll height, then animate to 0
      setMenuHeight(menuRef.current.scrollHeight);
      const timer = setTimeout(() => setMenuHeight(0), 10);
      return () => clearTimeout(timer);
    }
  }, [isOpen]);

  // ... existing toggle and click-outside logic

  return (
    <div ref={dropdownRef} className="dropdown-container">
      <button onClick={handleToggle}>Toggle Dropdown</button>
      <div
        ref={menuRef}
        className="dropdown-menu"
        style={{
          height: `${menuHeight}px`,
          overflow: 'hidden',
          transition: 'height 0.3s ease-in-out'
        }}
      >
        {/* Dynamic menu content */}
      </div>
    </div>
  );
}

This ensures the animation perfectly matches the menu's actual height every time.

Approach 3: React Transition Group (For Complex Animations) #

If you need more control over animation stages (like enter/exit hooks), use the react-transition-group library. First install it:

npm install react-transition-group

Then implement it like this:

import { CSSTransition } from 'react-transition-group';

function Dropdown() {
  const [isOpen, setIsOpen] = useState(false);
  const dropdownRef = useRef(null);

  // ... existing toggle and click-outside logic

  return (
    <div ref={dropdownRef} className="dropdown-container">
      <button onClick={handleToggle}>Toggle Dropdown</button>
      <CSSTransition
        in={isOpen}
        timeout={300}
        classNames="dropdown"
        unmountOnExit // Optional: removes the menu from DOM when closed
      >
        <div className="dropdown-menu">
          {/* Menu items */}
        </div>
      </CSSTransition>
    </div>
  );
}

Add the corresponding CSS classes:

.dropdown-enter {
  max-height: 0;
  overflow: hidden;
}

.dropdown-enter-active {
  max-height: 300px;
  transition: max-height 0.3s ease-in-out;
}

.dropdown-exit {
  max-height: 300px;
  overflow: hidden;
}

.dropdown-exit-active {
  max-height: 0;
  transition: max-height 0.3s ease-in-out;
}

Key Notes #

• Your existing click-outside logic works seamlessly with all these animation approaches—no changes needed there.
• Adjust the transition duration (e.g., 0.3s) to match your desired speed.
• For the CSS approach, make sure max-height is set to a value that's definitely larger than your menu's tallest possible state.

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