我有一组图像有popovers使用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} />
);
}
});
解决方法
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中删除。
