下拉菜单在reactJS引导中不起作用

Question

我正在使用Bottstrap的reactJS。我试着把用户形象和下拉。因此，当用户单击下拉菜单时，该下拉菜单将打开。

我的下拉列表不工作。

这是我的代码。：

    <div class="dropdown">
   <a href="#" data-toggle="dropdown" class="nav-item nav-link dropdown-toggle user-action">
   <img class = "loginImage" src="https://someImage" class="bi bi-person" alt="Avatar"></img>
   </a> 
   <ul class="dropdown-menu">
      <li>
         <a href="#" class="dropdown-item"> Profile A</a>
      </li>
      <li>
         <a href="#" class="dropdown-item"> Profile B</a>
      </li>
      <li>
         <a href="#" class="dropdown-item"> Profile C</a>
      </li>
      <li>
         <a href="#" class="dropdown-item">Profile D</a>
      </li>
   </ul>
</div>

这里的任何帮助或任何其他方式来实现这一点。

我的依赖关系：

    "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.35",
    "@fortawesome/free-solid-svg-icons": "^5.15.3",
    "@fortawesome/react-fontawesome": "^0.1.14",
    "@popperjs/core": "^2.9.2",
    "@testing-library/jest-dom": "^5.13.0",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "axios": "^0.21.1",
    "bootstrap": "^5.0.1",
    "bootstrap-icons": "^1.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-popper": "^2.2.5",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },

Answer 1

为了让下拉菜单与bootstrap一起工作，您需要导入@popperjs/core依赖项。

bootsrap 5在jquery上删除了dep，因此不再需要导入jquery。

检查我的sandbox