reactjs - 如何在我的 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 中触发弹出窗口。

注意:我不想在这种情况下添加额外的库，例如react-bootstrap，并且需要基于React的解决方案。

任何想法都会有帮助。

Answer 1

使用 Bootstrap 制作弹出窗口基本上需要两个步骤:

1. 渲染具有 popover 属性、data-toggle="popover"、title 和 data-content 的元素
2. 通过 JavaScript 启用弹出窗口

在 React 中，render() 用于步骤 1，componentDidMount() 用于步骤 2

例如:

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是使用库的一种简单方法。它基本上为您完成了上述操作。如果您不想要该库，则实际上并不需要。