React jQuery不会将元素识别为Bootstrap模式

Question

目标：在React中访问Bootstrap Modal的modal()代码。

有一个带有Bootstrap v4的React应用程序。

的package.json ：

{
  ...
  "dependencies": {
    "bootstrap": "^4.1.1",
    "jquery": "^3.3.1",
    "popper.js": "^1.14.3",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-router-dom": "^4.2.2",
    "react-scripts-ts": "2.8.0"
  },
  "scripts": {
    "start": "react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "react-scripts-ts test --env=jsdom",
    "eject": "react-scripts-ts eject"
  },
  "devDependencies": {
    "@types/jest": "^22.2.3",
    "@types/node": "^9.6.18",
    "@types/react": "^16.3.14",
    "@types/react-dom": "^16.0.5",
    "@types/react-router-dom": "^4.2.6"
  },
  ...
}

现在尝试通过Chrome开发工具获取modal()：

所以看起来像是：

• 可以查看jQuery;
• 无法将foo模态识别为Bootstrap modal();

如何让jQuery将foo识别为modal()？