当我最初试图让 Bootstrap 弹出窗口工作时，我（毫无疑问，仍然有）很多上下文理解缺失。

首先是：Bootstrap "Popover" 插件实际上是一个JQuery 插件。我认为这就是所有 Bootstrap 插件的工作方式，但我找不到任何关于此的 Bootstrap 介绍性文档。这解释了popover()方法及其来源。

下面，我概述了在 React / Typescript / Webpack 堆栈的上下文中使弹出窗口工作所需的条件。

在下文中，我假设您已经按照Bootstrap doco配置了 Webpack 。

您不需要原始问题中的“弹出窗口”和“工具提示”行，假设您webpack.config.js按照 Bootstrap doco 进行操作，并且您import 'bootstrap';的代码库中有某处。

您需要添加 JQuery 类型（如果尚未存在），以便您可以导入$并拥有正确的类型：

"devDependencies": {
   "@types/jquery": "3.2.15",
   ...
}

"dependencies": {
  "bootstrap": "4.0.0-beta",
  "jquery": "3.2.1",
  "popper.js": "1.11.0",
  ...
}

根据 Netanel Basal 的这篇博客文章，您必须扩展 JQuery 的类型定义，以便它了解 Popover 插件。在typings.d.ts（或项目中任何有意义的地方），添加以下内容：

// support for JQuery popover plugin from Bootstrap 4
interface JQuery {
  popover() : any;
}

请注意，定义是使弹出窗口以静态类型方式从代码中工作所需的最低限度。它需要扩展以支持传递参数，以便您可以自定义弹出行为。或者您可以使用data属性来传递这些参数，如doco 中的Live 示例。

在 React 组件本身中，从问题中声明弹出框的 JSX 似乎工作正常。

要“初始化”popover，根据问题，您需要导入 JQuery 标识符，然后调用 popover 方法：

...
const $ = require('jquery'); 
...
componentDidMount(): void{
  $('[data-toggle="popover"]').popover();
}
...

“导入表单”对我不起作用，所以我不得不这样require()做。

该代码在整个 HTML 页面中搜索带有 的元素data-toggle="popover"，并返回一个 JQuery 对象，该对象具有popover()您可以调用的方法（这是整个 JQuery 插件部分）。

一旦在popover()具有 popover 属性的元素上被调用，当元素被点击时，popovers 将自动显示（不需要管理 popover 特定的 React 状态）。

编辑

如上所示，在整个 HTML 页面中搜索所有弹出窗口并不是一个好主意。在多个 React 组件中有多个弹出框的复杂页面中，每个组件最终都会覆盖彼此的popover()选项。

这是我当前针对可重用 React bootstrap Popover 组件的解决方案。

扩展 Typescript 类型以了解更多弹出选项：

// support for JQuery popover plugin from Bootstrap 4
interface JQuery {
  popover(options?: PopoverOptions) : any;
}

interface PopoverOptions {
  container?: string | Element | boolean;
  content?: string | Element | Function;
  placement?: "auto" | "top" | "bottom" | "left" | "right" | Function;
  title?: string | Element | Function;
  ...
}

创建Popover.tsx如下：

export interface PopoverProps {
  popoverTitle: string | Element | Function;
  popoverContent: string | Element | Function;
}

export class Popover
extends PureComponent<PopoverProps, object> {

  selfRef: HTMLSpanElement;

  componentDidMount(): void{
    $(this.selfRef).popover({
      container: this.selfRef,
      placement: "auto",
      title: this.props.popoverTitle,
      content: this.props.popoverContent,
    });
  }

  render(){
    return <span
      ref={(ref)=>{if(ref) this.selfRef = ref}} 
      data-toggle="popover"
    >
      {this.props.children}
    </span>;

  }
}

然后使用弹出窗口，如：

<Popover 
  popoverTitle="The popover title"
  popoverContent="The popover content"
>
  <span>
    Click this to show popover.
  </span>
</Popover>

注意与动态内容的 Popover 定位相关的问题：Bootstrap 4 - 自动 Popover 重新定位如何工作？

文档试图说明的是，仅仅拥有一个带有 data-toggle="popover" 的元素不会创建一个 popover 的实例。您需要使用 javascript 调用显式初始化它。

在非react环境中，您可以将其添加到文档就绪功能中，例如像这样

$(document).ready(function () {
    $('.myPopoverItem').popover({
        html: true
        , trigger: 'focus'
        , content: $.proxy(this.getContent, this)
    });
}

但是在 React 中，您需要将它添加到对象的构造函数代码中，以便在 render() 之后调用它（元素必须在页面上）。

我找到了这个潜在的答案：React "after render" code? 它推荐 componentDidMount 函数，您可以在其中调用 popover 初始化。

所以在你的 React 对象中，你会有一个函数

componentDidMount() {
    $('.myPopoverItem').popover({
        html: true
        , trigger: 'focus'
        , content: $.proxy(this.getContent, this)
    });
}