在Bootstrap popover中渲染React组件

jquery twitter-bootstrap reactjs

11593 观看

4回复

148 作者的声誉

我有一组使用bootstrap popover ui组件在内容属性/参数中使用popovers的图像我想添加ReactJS MusicList组件,但我无法弄清楚语法或是否可能。

var MusicList = React.createClass({
    render : function(){
        return(<ul><li>Here</li></ul>);
    }
});

var PopoverImage = React.createClass({
    componentDidMount:function(){

        $("#"+this.getDOMNode().id).attr('data-component','<span>here</span>');
        $("#"+this.getDOMNode().id).popover({
            html:true,
            content: 
            });
    },

    render:function(){
        return(
            <img href="#" id={this.props.friend.uid+'_popover'} data-html={true} className="smallImage" src={this.props.friend.pic_small} rel="popover" data-original-title={this.props.friend.name} />

                );
    }
});
作者: Fredrick Thornton 的来源 发布者: 2013 年 11 月 17 日

回应 (4)


39

96197 作者的声誉

决定

Bootstrap不易在弹出窗口中渲染动态组件。如果你想要呈现的popover是静态的,你可以简单地使用React's renderComponentToString,它接受一个组件并通过回调返回一个HTML字符串:

var html = React.renderComponentToString(<MusicList />);
$(this.getDOMNode()).popover({
    html: true,
    content: html
});

但是,如果您的组件具有任何交互性,则该策略将不起作用,因为React从未有机会附加事件处理程序(或运行任何自定义生命周期方法)。实际上,Bootstrap没有提供正确的钩子来使你的popover内容动态化。


也就是说,可以通过修补Bootstrap来完成这项工作。我创建了一个具有动态弹出内容的实时演示:

popover演示截图
http://jsfiddle.net/spicyj/q6hj7/

请注意,当前时间在弹出窗口中由每秒更新的React组件呈现。


这个popover是如何创建的?

我修补了Bootstrap popover的setContent方法以获取除HTML或文本字符串之外的React组件。我没有使用jQuery htmltext方法,而是使用React.renderComponent

// Patch Bootstrap popover to take a React component instead of a
// plain HTML string
$.extend($.fn.popover.Constructor.DEFAULTS, {react: false});
var oldSetContent = $.fn.popover.Constructor.prototype.setContent;
$.fn.popover.Constructor.prototype.setContent = function() {
    if (!this.options.react) {
        return oldSetContent.call(this);
    }

    var $tip = this.tip();
    var title = this.getTitle();
    var content = this.getContent();

    $tip.removeClass('fade top bottom left right in');

    // If we've already rendered, there's no need to render again
    if (!$tip.find('.popover-content').html()) {
        // Render title, if any
        var $title = $tip.find('.popover-title');
        if (title) {
            React.renderComponent(title, $title[0]);
        } else {
            $title.hide();
        }

        React.renderComponent(content,  $tip.find('.popover-content')[0]);
    }
};

现在你可以写了

$(this.getDOMNode()).popover({
    react: true,
    content: <MusicList />
});

在您的componentDidMount方法中,并使其正确呈现。如果查看链接的JSFiddle,您将看到<BsPopover />我制作的通用包装器,它会为您处理所有Bootstrap调用,包括在从DOM中删除包装器组件后正确清理弹出组件。

作者: Sophie Alpert 发布者: 17.11.2013 08:47

2

84 作者的声誉

有一个名为React-Bootstrap的新库正在快速开发中。

https://react-bootstrap.github.io/components.html#popovers

如果包含此模块,则可以使popover成为可以保存在变量中的组件,然后在渲染功能中使用。

他们的例子:

const positionerInstance = ( <ButtonToolbar> <OverlayTrigger trigger="click" placement="bottom" overlay={<Popover title="Popover bottom"><strong>Holy guacamole!</strong> Check this info.</Popover>}> <Button bsStyle="default">Click</Button> </OverlayTrigger> <OverlayTrigger trigger="hover" placement="bottom" overlay={<Popover title="Popover bottom"><strong>Holy guacamole!</strong> Check this info.</Popover>}> <Button bsStyle="default">Hover</Button> </OverlayTrigger> <OverlayTrigger trigger="focus" placement="bottom" overlay={<Popover title="Popover bottom"><strong>Holy guacamole!</strong> Check this info.</Popover>}> <Button bsStyle="default">Focus</Button> </OverlayTrigger> <OverlayTrigger trigger="click" rootClose placement="bottom" overlay={<Popover title="Popover bottom"><strong>Holy guacamole!</strong> Check this info.</Popover>}> <Button bsStyle="default">Click + rootClose</Button> </OverlayTrigger> </ButtonToolbar> );

React.render(positionerInstance,mountNode);

我的代码:

showMoreDetails:function(obj,columns){

    var popOver = (
        <Popover>
            <table>
                {
                    columns.map(col =>
                            <tr>
                                <td style={{textAlign:'right', padding:5}}>
                                    {col.label}:&nbsp;
                                </td>
                                <td style={{padding:5}}>
                                    {obj[col.key]}
                                </td>
                            </tr>
                    )
                }
            </table>
        </Popover>
    );

    return(
        <OverlayTrigger trigger='click' rootClose placement='left' overlay={popOver}>
            <div className="popover-more">more...</div>
        </OverlayTrigger>
    );

},
作者: ml242 发布者: 28.09.2015 05:54

0

283 作者的声誉

在发布了这个回复并经过测试并对这种解决方法进行了一些工作之后,我意识到它并不是最优的。

一旦用户与之交互,Bootstrap下拉菜单就会关闭。这可能不是所希望的行为(在我的情况下,我正在插入一个日期选择器,用户无法更改月份而无需重新打开菜单来选择新日期)。


我遇到了同样的问题,我提出了一个简单而另类的解决方案。

我不想使用react-bootstrap(我的app的其他部分没有被重新使用并使用bootstrap,所以我不想让两个库做同样的事情)。

Bootstrap开箱即用的下拉组件几乎提供了与popover相同的功能,除了它更灵活。这是标准的Bootstrap下拉列表:

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

这是您在不破坏它的情况下使其工作所需的最小值,您可以在其中包含其中的任何React元素:

<div className="dropdown">
  <button data-toggle="dropdown">
    Dropdown trigger
  </button>
  <div className="dropdown-menu">
    <myGreatReactIntervactiveComponent 
      value={this.props.value}
      onChange={this.handleChange}
      onClick={this.handleClick}
      children={this.greatChildrenForMyGreatREactInteractiveComponent}
    />
  </div>
</div>

您需要保留的是(i)包装div上的类“下拉列表”,(ii)触发器上的数据切换属性“下拉列表”(您可以将触发器更改为您想要的任何html元素)和(iii)下拉列表中的“下拉菜单”类(您也可以将其更改为您想要的任何html元素,并且您不必坚持Bootstrap提出的“ul”元素)。

与弹出窗口相比,您丢失了一些功能(您无法定义自己的过渡,您无法在顶部,左侧或右侧显示它们,但仅在下方 - 它是下拉列表)但您可以完全控制下拉列表的内容/酥料饼。

作者: Cedric 发布者: 14.01.2016 08:38

0

728 作者的声誉

解决此问题的另一种方法是将您想要的反应组件包含在包含popover的组件的render函数中的popover内容中,但将其放在div中,其样式为“display:none;” 所以不显示并占用空间,也给它一个id,例如'popOverContent'。然后在初始化popover设置内容时:document.getElementById(“popOverContent”)。

作者: Skill M2 发布者: 29.01.2019 11:08
32x32