如何在React应用程序中初始化Bootstrap 4弹出窗口？

Question

我不知道如何使弹出窗口起作用，如：https
://getbootstrap.com/docs/4.0/components/popovers/ 。

该文档讨论了popover支持是一个插件，并且也需要工具提示插件，因此我已经修改了我的代码webpack.config.js以添加这两个插件，现在看起来像这样：

...
new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  'window.jQuery': 'jquery',
  Popper: ['popper.js', 'default'],
  Popover: 'exports-loader?Popover!bootstrap/js/dist/popover',
  Tooltip: "exports-loader?Tooltip!bootstrap/js/dist/tooltip",
}),
...

我还没有发现关于自举插件概念的任何文件，因此上述两行Popover，并Tooltip从搜索来了，不知道他们是正确的。

该文档指出：

由于性能原因，弹出窗口是可选的，因此您必须自己对其进行初始化。

但是我不知道该怎么做。

文档显示以下用于初始化弹出窗口的代码：

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

但是我不知道应该怎么做- popover()我的元素上没有要调用的功能-这是怎么工作的？

这是我的尝试使用弹出框的代码的示例：

render(){

  ...

  <span>
    Summary info
    <button 
      type="button" className="btn btn-sm" 
      data-toggle="popover" title="Popover title" 
      data-content="The popover Content"
    >
      Show popover
    </button>        
  </span>

  ...
}

如何使Bootstrap V4弹出功能在React应用程序的上下文中起作用？具体来说-如何“初始化”弹出窗口？

我正在使用Typescript 2.3，React 16，Bootstrap 4（没有react-bootstrap样式库）。

请注意，react-bootstrap仅支持Bootstrap V3，而reactstrap太不稳定，我不想使用它。

Answer 1

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

第一件事是：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;
}

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

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

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

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

“导入表单”对我不起作用，因此我必须这样require()做。

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

一旦popover()被称为与酥料饼属性的元素，popovers将自动被点击的元素时显示的（有没有需要管理酥料饼特有的阵营状态）。

编辑

如上所示，在整个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定位相关的问题：Bootstrap4-自动Popover重新定位如何工作？