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

Question

我不知道如何让弹出窗口工作，根据:https://getbootstrap.com/docs/4.0/components/popovers/ .

文档谈到弹出框支持是一个插件并且还需要工具提示插件，所以我修改了我的 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",
}),
...

我没有找到任何关于Bootstrap插件概念的文档，所以以上两行Popover和Tooltip来自搜索，不确定它们是否是正确。

文档指出:

Popovers are opt-in for performance reasons, so you must initialize them yourself.

但我不知道该怎么做。

文档显示了以下用于初始化弹出框的代码:

$(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 plugin .我假设这就是所有 Bootstrap 插件的工作方式，但我找不到任何关于此的 Bootstrap 介绍性文档。这样就解释了 popover() 方法及其来源。

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

在下文中，我假设您已经按照 the 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",
  ...
}

根据 this blog article by Netanel Basal，您必须扩展 JQuery 的类型定义，以便它知道 Popover 插件.在 typings.d.ts(或项目中任何有意义的地方)中，添加以下内容:

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

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

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

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

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

“导入表单”didn't work for me ，所以我必须 require() 它。

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

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

---

编辑

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

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

扩展 Typescript 类型以了解更多信息 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;
  ...
}

像这样创建 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 - how does automatic Popover re-positioning work?