jquery – 在Bootstrap弹出框中渲染React组件

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} />

                );
    }
});

Bootstrap不能轻松地在弹出框中呈现动态组件。如果你想展示的popover是静态的，你可以简单地使用React的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’s setContent method除了HTML或文本字符串之外，还需要一个React组件。而不是使用jQuery的html或文本方法，我使用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调用，包括正确清理popover组件一旦包装组件从DOM中删除。