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

Question

我不知道如何使popovers工作，根据：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", 
}), 
... 

我的天堂” t发现任何有关Bootstrap插件概念的文档，因此Popover和Tooltip的上述两行来自搜索，并不确定它们是否正确。

的文档状态：

Popovers的选择，在性能方面的原因，所以你必须自己初始化它们。

但我不明白该怎么做。

文档显示初始化酥料饼下面的代码：

$(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> 

    ... 
} 

我如何在一个应用程序做出反应的背景下，引导V4酥料饼的功能工作？具体来说 - 我如何“初始化”popover？

---

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

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

Answer 1

我（还有，无疑是）很多缺失，当我最初试图让引导popovers工作上下文的理解。

首先是：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", 
    ... 
} 

你不得不延长JQuery的类型定义，以便它知道Popover插件，按照this blog article by Netanel Basal。在typings.d.ts（或任何在您的项目是有道理的），添加以下内容：

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

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

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

要“初始化”的酥料饼，按这个问题，你需要导入JQuery的标识，然后调用酥料饼的方法：

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

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

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

一旦popover()已被弹出属性元素调用，弹出将自动显示单击元素时（不需要管理特定于弹出窗口的React状态）。

---

编辑

这不是一个好主意，搜索整个HTML页面的所有popovers如上图所示。在多个React组件中有多个弹出窗口的复杂页面中，每个组件将最终覆盖对方的popover()选项。

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

延长打字稿分型，以了解更多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> 

当心有关酥料饼的定位问题动态内容：Bootstrap 4 - how does automatic Popover re-positioning work?

Answer 2

该文档试图说，仅仅使用data-toggle =“popover”元素将不会创建弹出式窗口的实例。您需要使用JavaScript调用显式初始化它。

在非反应环境中，你可以把它添加到文档准备功能，例如像这样

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

在阵营虽然，你需要将它添加到您的对象的构造函数的代码，以便在render（）之后调用它（元素必须位于页面上）。

我发现这个潜在的答案：React "after render" code? 它在哪里推荐componentDidMount函数，您可以在其中调用popover初始化。

因此，在你作出反应的对象，你将有一个功能

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