如何初始化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) 
    }); 
}