jquery - 在 Bootstrap 弹出窗口中渲染 React 组件

Question

我有一组在内容属性/参数中使用 bootstrap popover ui 组件具有弹出窗口的图像，我想添加 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} />

                );
    }
});

Answer 1

Bootstrap 无法轻松地在弹出窗口中呈现动态组件。如果你想要呈现的弹出窗口是静态的，你可以简单地使用React的renderComponentToString它接受一个组件并通过回调返回一个 HTML 字符串:

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

但是，如果您的组件具有任何交互性，则该策略将不起作用，因为 React 永远没有机会附加事件处理程序(或运行任何自定义生命周期方法)。事实上，Bootstrap 没有提供适当的 Hook 来使您的弹出窗口内容动态化。

<小时/>

也就是说，可以通过修补 Bootstrap 来实现此功能。我创建了一个具有动态弹出内容的现场演示:

<强> http://jsfiddle.net/spicyj/q6hj7/

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

<小时/>

这个弹出窗口是如何创建的？

我修补了Bootstrap popover's setContent method除了 HTML 或文本字符串之外，还可以使用 React 组件。而不是使用 jQuery 的 html或text方法，我用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 中删除包装器组件后正确清理弹出窗口组件。