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

问题描述

我不知道如何让弹出框工作，按照:https://getbootstrap.com/docs/4.0/components/popovers/.

文档谈到 popover 支持是一个插件并且还需要工具提示插件，所以我修改了我的 webpack.config.js 以添加这两个，现在它看起来像这样:

<代码>...新的 webpack.ProvidePlugin({$: 'jquery',jQuery: 'jquery','window.jQuery': 'jquery',波普尔:['popper.js'，'默认']，Popover: 'exports-loader?Popover!bootstrap/js/dist/popover',工具提示: "exports-loader?Tooltip!bootstrap/js/dist/tooltip",}),...

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

文档说明:

<块引用>

弹出窗口是出于性能原因选择加入的，因此您必须自己初始化它们.

但我不明白该怎么做.

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

$(function () {$('.example-popover').popover({容器:'身体'})})

但我不明白那应该做什么 - 我的元素上没有要调用的 popover() 函数 - 这是如何工作的?

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

render(){...<跨度>摘要信息<按钮type="button" className="btn btn-sm"数据切换=弹出框"标题=弹出框标题"data-content="弹出框内容">显示弹出框</span>...}

如何使 Bootstrap V4 弹出窗口功能在 React 应用程序的上下文中工作?具体来说 - 我如何初始化"弹出窗口?

<小时>

我使用的是 Typescript 2.3、React 16、Bootstrap 4(没有 react-bootstrap 样式库).

注意react-bootstrap只支持Bootstrap V3，reactstrap太不稳定，不想用

解决方案

当我最初尝试让 Bootstrap 弹出框工作时，我有(毫无疑问，仍然有)很多上下文理解缺失.

第一件事是:Bootstrap "Popover" 插件实际上是一个 JQuery 插件.我认为这就是所有 Bootstrap 插件的工作方式，但我找不到任何关于此的 Bootstrap 介绍性文档.这样就解释了 popover() 方法及其来源.

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

在下面，我假设你已经按照 Bootstrap 文档.

您不需要原始问题中的Popover"和Tooltip"行，假设您是 webpack.config.js 符合 Bootstrap doco 并且您有 import 'bootstrap'; 在你的代码库中的某个地方.

<小时>

您需要添加 JQuery 类型(如果尚未存在)，以便您可以导入 $ 并拥有正确的类型:

"devDependencies": {"@types/jquery": "3.2.15",...}依赖关系":{"bootstrap": "4.0.0-beta","jquery": "3.2.1","popper.js": "1.11.0",...}

您必须根据 这篇由 Netanel Basal 撰写的博客文章.在 typings.d.ts(或项目中任何有意义的地方)中，添加以下内容:

//支持 Bootstrap 4 中的 JQuery popover 插件接口 JQuery {popover() : 任何;}

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

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

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

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

导入表单"对我不起作用，所以我不得不require() 它.

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

在具有 popover 属性的元素上调用 popover() 后，单击该元素时会自动显示 popover(无需管理特定于 popover 的 React 状态).><小时>

编辑

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

这是我当前的可重用 React bootstrap Popover 组件的解决方案.

扩展 Typescript 类型以了解更多 popover 选项:

//支持 Bootstrap 4 中的 JQuery popover 插件接口 JQuery {popover(options?: PopoverOptions) : any;}接口 PopoverOptions {容器?:字符串 |元素 |布尔值；内容?:字符串 |元素 |功能;位置?:自动" |顶" |底部" |左" |对" |功能;标题?:字符串 |元素 |功能;...}

创建 Popover.tsx 像:

导出接口 PopoverProps {popoverTitle: 字符串 |元素 |功能;popoverContent: 字符串 |元素 |功能;}导出类 Popoverextends PureComponent{selfRef: HTMLSpanElement;componentDidMount(): void{$(this.selfRef).popover({容器:this.selfRef，位置:自动"，标题:this.props.popoverTitle，内容:this.props.popoverContent，});}使成为(){返回{if(ref) this.selfRef = ref}}数据切换=弹出">{this.props.children}</span>;}}

然后使用弹出框:

注意与动态内容的 Popover 定位相关的问题:Bootstrap 4 - 自动 Popover 重新定位如何工作?

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

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

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.

The documentation states:

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

But I don't understand how to do that.

The documentation shows the following code for initializing the popover:

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

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?

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>

  ...
}

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

---

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

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

解决方案

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

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.

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

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

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.

---

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

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

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.

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

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

The "import form" didn't work for me, so I had to require() it.

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

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

---

EDIT

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.

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

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

Create Popover.tsx like:

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

  }
}

Then use the popover like:

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

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

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