如何在React应用程序中初始化Bootstrap 4 popover？ [英] How do I initialize the Bootstrap 4 popover in a React application?

问题描述

我无法弄清楚如何使popovers工作，如下： https：/ /getbootstrap.com/docs/4.0/components/popovers/ 。

I can't figure out how to make popovers work, as per: https://getbootstrap.com/docs/4.0/components/popovers/.

该文档讨论了作为插件的popover支持并且还需要工具提示插件，所以我修改了我的 webpack.config.js 来添加这两个，现在它看起来像这样：

The documentation talks about the popover support being a plugin and requiring the tooltip plugin as well, so I've modified my webpack.config.js to add those two, now it looks like this:

...
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 和工具提示来自搜索，而非s如果它们是正确的话。

I haven't found any documentation about the Bootstrap plugin concept, so the above two lines for Popover and Tooltip came from a search, not sure if they're correct.

文件说明：

Popovers is因性能原因选择加入，所以你必须自己初始化它们。

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

但我不明白该怎么做。

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

The documentation shows the following code for initializing the popover:

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

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

But I don't understand what that's supposed to be doing - there's no popover() function on my element to invoke - how does this work?

这是我的代码试图使用一个popover的例子：

Here's an example of my code that's trying to use a 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应用程序的上下文中工作？具体来说 - 我如何初始化popover？

How do I make the Bootstrap V4 popover functionality work in the context of a React application? Specifically - how do I "initialize" the popover?

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

I'm using Typescript 2.3, React 16, Bootstrap 4 (no react-bootstrap style libraries).

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

Note that react-bootstrap supports only Bootstrap V3, and reactstrap is too unstable and I don't want to use it.

推荐答案

当我最初试图让Bootstrap popovers工作时，我（毫无疑问）仍有许多缺失的上下文理解。

I had (still have, undoubtedly) a lot of missing contextual understanding when I was initially trying to get Bootstrap popovers working.

首先是：BootstrapPopover插件实际上是 JQuery插件。我假设所有Bootstrap插件都是如何工作的，但是我找不到任何关于这个的Bootstrap介绍性文档。这就解释了 popover（）方法及其来源。

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.

下面，我概述了什么是需要使弹出窗口在React / Typescript / Webpack堆栈的上下文中工作。

Below, I've outlined what is needed to make the popovers work in the context of a React / Typescript / Webpack stack.

在下面，我假设您按照 Bootstrap doco 。

In the following, I'm assuming you've configured Webpack as per the Bootstrap doco.

你不需要原始问题中的Popover和Tooltip行，假设你是 webpack.config.js 是按照Bootstrap doco，你的代码库中有 import'bootstrap'; 。

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.

您需要添加JQuery类型（如果尚未存在），以便您可以导入 $ 并使用正确的类型：

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

你必须扩展JQuery的类型定义，以便它知道Popover插件，按照 Netanel Basal撰写的这篇博客文章。在 typings.d.ts （或在您的项目中的任何地方），添加以下内容：

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;
}

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

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.

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

In the React component itself, the JSX to declare the popover from the question seems to work fine.

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

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();
}
...

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

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

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).

在使用popover属性的元素上调用 popover（）后，弹出窗口将自动显示单击元素（不需要管理特定于弹出窗口的React状态）。

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).

编辑

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

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.

这是我目前可重复使用的React bootstrap Popover组件的解决方案。

Here's my current solution for a re-usable React bootstrap Popover component.

扩展Typescript类型以理解更多弹出式选项：

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;
  ...
}

创建 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，如：

Then use the popover like:

<Popover 
  popoverTitle="The popover title"
  popoverContent="The popover content"
>
  <span>
    Click this to show popover.
  </span>
</Popover>

注意与动态内容的Popover定位相关的问题： Bootstrap 4 - 自动Popover重新定位的工作原理是什么？

Beware issues related to Popover positioning with dynamic content: Bootstrap 4 - how does automatic Popover re-positioning work?

这篇关于如何在React应用程序中初始化Bootstrap 4 popover？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！