如何在React应用程序中初始化Bootstrap 4 popover？

Question

我想不出如何使爆米花工作，如下所示：https://getbootstrap.com/docs/4.0/components/popovers/.

文档中提到了popover支持是一个插件，并且需要工具提示插件，所以我修改了我的网页包。配置。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的两行来自搜索，不确定它们是否正确。

留档声明：

Popovers是基于性能原因选择加入的，因此您必须自己初始化它们。

但是我不知道怎么做。

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

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

但是我不明白它应该做什么-在我的元素上没有要调用的popover（）函数-这是如何工作的？

下面是我尝试使用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>

  ...
}

如何使引导V4 popover功能在React应用程序的上下文中工作？具体来说-如何“初始化”popover？

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

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

Answer 1

留档想说的是，简单地拥有一个带有data-toggle="popover"的元素不会创建popover的实例。您需要显式地用javascript调用初始化它。

在非react环境中，可以将其添加到documentready函数中，例如

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

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

我找到了这个可能的答案：在“渲染”代码之后做出反应？其中建议使用componentDidMount函数，您可以在该函数中调用popover初始化。

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

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

Answer 2

当我最初尝试让引导式弹出窗口正常工作时，我（毫无疑问，现在仍然）对上下文缺乏理解。

第一件事是：引导“Popover”插件实际上是一个JQuery插件。我假设所有引导插件都是这样工作的，但是我找不到任何关于这方面的引导文档。这就解释了popover（）方法及其来源。

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

在下文中，我假设您已经按照引导文档配置了Webpack。

您不需要原始问题中的“Popover”和“工具提示”行，假设您是webpack.config.js按照Bootstrap doco，并且您在代码库中的某个地方有导入'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;
}

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

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

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

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

“导入表单”不适合我，所以我必须require（）it。

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

一旦对具有popover属性的元素调用了popover（），单击该元素时，将自动显示popover（无需管理特定于popover的React状态）。

编辑

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

这是我目前为可重用的React引导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类似于：

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-自动Popover重新定位是如何工作的？