React下拉菜单样式异常求助：无法正确渲染下拉样式

Let’s break down what’s causing your dropdown menu to misbehave and walk through how to fix it:

1. Incorrect DOM Structure (The Primary Issue) #

Bootstrap’s dropdown component depends on a strict hierarchy for its CSS and positioning logic to work properly:

• The .dropdown container must be the direct parent of both the .dropdown-toggle button and the .dropdown-menu
• The .dropdown-menu needs to be a direct sibling of the .dropdown-toggle (not nested inside extra <div> or <form> elements)

In your current code, the <ul class="dropdown-menu"> is wrapped inside multiple nested elements, which breaks Bootstrap’s style targeting. The menu ends up inheriting wrong positioning context and width from those intermediate containers instead of the parent .dropdown.

Fixed Structure Example: #

<div ref="btnGroup" className="dropdown">
  {/* Toggle Button - direct child of .dropdown */}
  <button className="dropdown-toggle" data-toggle="toggle" onClick={this.toggleDropdown}>
    Toggle Dropdown
  </button>
  
  {/* Dropdown Menu - direct sibling of toggle, direct child of .dropdown */}
  <ul className="scrollable-menu-parent dropdown-menu">
    <li className="dropdown-item">
      {/* Move your form/content inside the dropdown-item */}
      <form className="droplist-panel">
        <input className="droplist-search" placeholder="Search..." />
        <div className="scrollable-menu">
          <li className="dropdown-item">Item 1</li>
          <li className="dropdown-item">Item 2</li>
          {/* Add more list items here */}
        </div>
      </form>
    </li>
  </ul>
</div>

2. Replace class with className in React #

React uses className instead of the standard class attribute for HTML elements. While browsers might tolerate class, it’s not the correct React syntax and can lead to unexpected style application issues. Update all instances of class to className in your JSX (you already did this for the outer div, but missed it on the button, ul, form, etc.).

3. Check for Positioning Overrides #

Ensure your .dropdown container retains position: relative (this is part of Bootstrap’s default .dropdown class, but double-check if custom CSS is overriding it). If any elements between .dropdown and .dropdown-menu have position: relative, that will break the menu’s absolute positioning relative to the toggle button.

4. Optional: Use React State Instead of jQuery (Best Practice) #

While your jQuery code works, managing the dropdown’s open/close state with React’s internal state avoids conflicts between jQuery and React’s virtual DOM. Here’s a quick refactor:

class CustomDropdown extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isOpen: false };
  }

  toggleDropdown = () => {
    this.setState(prevState => ({ isOpen: !prevState.isOpen }), () => {
      if (this.state.isOpen && this.props.onOpen) {
        this.props.onOpen();
      }
    });
  };

  closeDropdown = () => {
    this.setState({ isOpen: false });
    this.clearState();
  };

  render() {
    return (
      <div className={`dropdown ${this.state.isOpen ? 'open' : ''}`}>
        <button className="dropdown-toggle" onClick={this.toggleDropdown}>
          Toggle Dropdown
        </button>
        <ul className="scrollable-menu-parent dropdown-menu">
          {/* Menu content goes here */}
        </ul>
      </div>
    );
  }
}

After implementing these changes, your dropdown menu should inherit Bootstrap’s correct width and positioning styles.

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