如何在我的 React 应用程序中触发 Bootstrap 弹出窗口

Question

在 jQuery 中，我们通常触发如下所示的弹出窗口：

$(".font-family").popover({ 
   html: true, 
   animation: true, 
   placement: 'auto top'
});

组件：

this.state.data.map((element, index) => {
            return (
                <div key={index} style={{ "fontFamily":element.value }} data-fontFamily={element.value} id={element.name} data-content={element.message}
                    ref={(ref) => this.fontFamily = ref}
                    className = ".font-family"
                    >
                  {element.name}
                </div>
            );
});

但我想在 React 中实现它，我知道在 ComponentDidMount() 中调用这些代码会起作用，但我想以 React 的方式实现它。

$(this.refs.fontFamily).popover({  
            react: true 
});

通过使用它可以工作，但我厌倦了使用 $ 在反应中触发弹出窗口。

注意：我不想为这种情况添加像 react-bootstrap 这样的额外库，并且需要基于 React 的解决方案。

任何想法都会有所帮助。

Answer 1

解决方案是使用带有 jquery 的 React 来触发 bootstrap 弹出框，或者可以使用 React-bootstrap 弹出框。

Check the demo link

我们可以在 React 新版本 (16.5) 中使用 ReactDOM.createPortal。

Answer 2

基本上只需两步就可以得到一个带有 Bootstrap:

的弹出框

呈现具有弹出属性 data-toggle="popover"、title 和 data-content
通过JavaScript

在 React 中，第 1 步 render()，第 2 步 componentDidMount()

例如：

import React, { Component } from 'react';

export default class App extends Component {
  componentDidMount() {
    // Suppose you have already included bootstrap required JS files
    window.jQuery('#popoverExample').popover();
  }

  render() {
    return (
      <button
        id="popoverExample"
        type="button"
        className="btn btn-lg btn-danger"
        data-toggle="popover"
        title="Popover title"
        data-content="And here's some amazing content. It's very engaging. Right?">
        Click to toggle popover
      </button>
    )
  }
}

Here 是一种使用库的简单方法。它基本上为您完成上述工作。如果您不想要图书馆，则不是真的需要。

如何在我的 React 应用程序中触发 Bootstrap 弹出窗口

How to trigger Bootstrap popover in my react app

reactjs

bootstrap-popover