如何在React应用程序中初始化Bootstra4popover？

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",
}),
...

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

这些文件指出：

弹出是出于性能原因而选择的，所以您必须自己初始化它们。

但我不知道该怎么做。

文档显示了初始化popover的下列代码：

$(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 popover功能在React应用程序的上下文中工作？具体来说-我如何“初始化”波波夫？

我使用类型记录2.3，React 16，Bootstrap 4(没有反应-引导风格的库)。

请注意

Answer 1

当我开始尝试让Bootstrap弹出式的工作时，我已经(毫无疑问地)有很多缺失的上下文理解。

第一件事是: Bootstrap "Popover“插件实际上是一个JQuery插件。我想所有的引导插件都是这样工作的，但是我找不到任何关于引导插件的介绍性文档。这就解释了popover()方法以及它的来源。

下面，我已经概述了在一个React /类型记录/ Webpack堆栈的背景下，如何使弹出文件工作。

在下面，我假设您已经按照靴带多科配置了Webpack。

您不需要使用原始问题中的"Popover“和”工具提示“行，假设您是webpack.config.js，并且您的代码库中有import 'bootstrap';。

如果尚未出现，则需要添加JQuery类型，以便可以导入$并具有正确的类型：

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

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

您必须扩展JQuery的类型定义，以便它了解Popover插件，就像这篇由Netanel Basal撰写的博客文章一样。在typings.d.ts (或在项目中有意义的地方)中，添加以下内容：

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

请注意，定义是使弹出程序以静态类型的方式从代码中工作所需的最低限度。需要对其进行扩展以支持传递参数，以便您可以自定义popover行为。或者您可以使用data属性来传递这些参数，就像doco中的实例化那样。

在React组件本身中，从问题中声明popover的JSX似乎工作得很好。

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

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

“导入表单”不是为我工作的，所以我不得不require()它。

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

一旦对具有popover属性的元素调用了popover()，单击元素时就会自动显示弹出(不需要管理特定于弹出的响应状态)。

编辑

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

下面是我当前的解决方案，用于可重用的React引导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，如：

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定位相关的问题：引导4-如何自动波波弗重新定位工作？

Answer 2

文档试图说的是，简单地使用带有数据切换=“popover”的元素不会创建popover的实例。您需要使用javascript调用显式初始化它。

在无反应环境中，可以将其添加到文档就绪函数中，例如，如下所示

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

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

我找到了一个潜在的答案：反应“后渲染”代码？，它推荐componentDidMount函数，在该函数中，您可以调用popover初始化。

所以在您的function对象中，您将有一个函数

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