当我最初试图让Bootstrap popovers工作时，我（当然，仍然有）很多缺失的上下文理解。 
 
 首先是：Bootstrap“Popover”插件实际上是一个JQuery插件 。 我假设所有的Bootstrap插件都是如何工作的，但我找不到任何关于这个的Bootstrap介绍性文档。 这就解释了popover()方法及其来源。 
 
 下面，我概述了使弹出窗口在React / Typescript / Webpack堆栈的上下文中工作所需的内容。 
 
 在下面，我假设你按照Bootstrap doco配置了Webpack。 
 
 您不需要原始问题中的“Popover”和“Tooltip”行，假设您的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组件本身中，从问题中声明popover的JSX似乎工作正常。 
 
 要根据问题“初始化”弹出窗口，您需要导入JQuery标识符，然后调用popover方法： 
 
...
const $ = require('jquery'); 
...
componentDidMount(): void{
  $('[data-toggle="popover"]').popover();
}
...
 
 “导入表单” 对我不起作用 ，所以我不得不require()它。 
 
 该代码在整个HTML页面中搜索带有data-toggle="popover"元素，并返回一个JQuery对象，该对象具有可以调用的popover()方法（这是整个JQuery插件部分）。 
 
 一旦在具有弹出属性的元素上调用了popover popover() ，单击该元素时将自动显示弹出窗口（不需要管理特定于弹出窗口的React状态）。 
 
 
 编辑 
 
 如上所示，在整个HTML页面中搜索所有弹出窗口并不是一个好主意。 在一个复杂的页面中，在多个React组件中有多个popover() ，每个组件最终会覆盖彼此的popover()选项。 
 
 这是我目前可重用的React bootstrap Popover组件的解决方案。 
 
 扩展Typescript类型以了解更多popover 选项 ： 
 
// 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这样创建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像： 
 
<Popover 
  popoverTitle="The popover title"
  popoverContent="The popover content"
>
  <span>
    Click this to show popover.
  </span>
</Popover>
 
 注意与使用动态内容的Popover定位相关的问题： Bootstrap 4 - 自动Popover重新定位如何工作？ 

I had (still have, undoubtedly) a lot of missing contextual understanding when I was initially trying to get Bootstrap popovers working. 
 
First thing is: the Bootstrap "Popover" plugin is really a JQuery plugin. I assume that's how all the Bootstrap plugins work, but I couldn't find any Bootstrap introductory documentation about this. So that explains the popover() method and where it comes from.
 
Below, I've outlined what is needed to make the popovers work in the context of a React / Typescript / Webpack stack.
 
In the following, I'm assuming you've configured Webpack as per the Bootstrap doco.
 
You don't need the "Popover" and "Tooltip" lines from the original question, assuming you're webpack.config.js is as per the Bootstrap doco and you have import 'bootstrap'; somewhere in your codebase.
 
 
You need to add the JQuery typings, if not already present, so that you can import $ and have the right types:
 
"devDependencies": {
   "@types/jquery": "3.2.15",
   ...
}

"dependencies": {
  "bootstrap": "4.0.0-beta",
  "jquery": "3.2.1",
  "popper.js": "1.11.0",
  ...
}
 
You have to extend the type definition of JQuery so that it knows about the Popover plugin, as per this blog article by Netanel Basal. In typings.d.ts (or wherever makes sense in your project), add the following:
 
// support for JQuery popover plugin from Bootstrap 4
interface JQuery {
  popover() : any;
}
 
Note that definition is the bare minimum you need to get popovers working from your code in a statically typed way. It needs to be extended to support passing parameters so that you can customise the popover behaviour. Or you could use the data attributes to pass these parameters, as per the Live example in the doco.
 
In the React component itself, the JSX to declare the popover from the question seems to work fine. 
 
To "initialize" the popover, as per the question, you need to import the JQuery identifier and then call the popover method:
 
...
const $ = require('jquery'); 
...
componentDidMount(): void{
  $('[data-toggle="popover"]').popover();
}
...
 
The "import form" didn't work for me, so I had to require() it.
 
That code searches the entire HTML page for elements with data-toggle="popover", and returns a JQuery object that has the popover() method you can call (that's the whole JQuery plugin part). 
 
Once popover() has been called on the element with the popover attributes, popovers will be automatically displayed when the element is clicked (there's no need to manage popover-specific React state).
 
 
EDIT
 
It's not a good idea to search the entire HTML page for all popovers as shown above. In a complicated page with multiple popovers in multiple React components, each component would end up overwriting each other's popover() options. 
 
Here's my current solution for a re-usable React bootstrap Popover component.
 
Extend the Typescript typings to understand more popover options:
 
// 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;
  ...
}
 
Create Popover.tsx like:
 
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>;

  }
}
 
Then use the popover like:
 
<Popover 
  popoverTitle="The popover title"
  popoverContent="The popover content"
>
  <span>
    Click this to show popover.
  </span>
</Popover>
 
Beware issues related to Popover positioning with dynamic content: Bootstrap 4 - how does automatic Popover re-positioning work?