我找到了这个 React 中的下拉菜单示例 ，我发现它简单而且非常好用。

import React, { Fragment } from "react";
import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from "reactstrap";

export default class Example extends React.Component {
  constructor(props) {
    super(props);

    this.toggle1 = this.toggle1.bind(this);
    
    this.onMouseEnter = this.onMouseEnter.bind(this);
    this.onMouseLeave = this.onMouseLeave.bind(this);
    this.state = {
      dropdownOpen1: false,
    };
  }
  toggle1() {
    this.setState(prevState => ({
      dropdownOpen1: !prevState.dropdownOpen1
    }));
  }
  onMouseEnter() {
    this.setState({ dropdownOpen1: true });
  }
  onMouseLeave() {
    this.setState({ dropdownOpen1: false });
  }
  render() {
    return (
      <div>
        <Dropdown
          className="d-inline-block"
          onMouseOver={this.onMouseEnter}
          onMouseLeave={this.onMouseLeave}
          isOpen={this.state.dropdownOpen1}
          toggle={this.toggle1}
        >
          <DropdownToggle caret>Dropdown1</DropdownToggle>
          <DropdownMenu>
            <DropdownItem header>Submenu 1</DropdownItem>
            <DropdownItem>Submenu 1.1</DropdownItem>
          </DropdownMenu>
          &nbsp;&nbsp;&nbsp;
        </Dropdown>
      </div>
    );
  }
}

我想在依赖项和脚本都是 React 的项目中使用它。但我不知道如何开始。有人能给我指点一下吗？只有 1 个元素，我相信我可以放弃构造函数。我看到 React 使用了一些来自 reactstrap 的 Dropdown 组件，最好的方法是将它们包含在 Next 中项目的依赖项中？