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

但我想在反应中实现它，我知道在ComponentDidMount（）中调用这些代码会起作用，但我想以反应方式执行它。

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

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

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

任何想法都会有所帮助。

Answer 1

解决方案正在将React与jquery一起使用来触发引导程序弹出窗口，或者可以使用React-bootstrap弹出窗口。

Check the demo link

我们可以在新版本（16.5）中使用ReactDOM.createPortal。

Answer 2

使用Bootstrap弹出窗口基本上有两个步骤：

渲染具有data-toggle="popover"，title和data-content和popover属性的元素
通过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是使用库的一种简单方法。它基本上可以为您完成上述操作。如果您不需要该库，则不需要。

如何在我的反应应用程序中触发Bootstrap popover

2 个答案: