Jquery 在引导popover中呈现React组件

我有一组图像，在内容属性/参数中使用bootstrap popover ui组件创建了popover，我想添加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} />

                );
    }
});

var MusicList=React.createClass({
render:function（）{
返回（
此处
）；
}
});
var PopoverImage=React.createClass({
componentDidMount:function（）{
$（“#”+this.getDOMNode（）.id）.attr（'data-component'，'here'）；
$（“#”+this.getDOMNode（）.id）.popover({
是的，
内容：
});
},
render:function（）{
返回(
);
}
});

Bootstrap无法轻松渲染popover中的动态组件。如果要呈现的popover是静态的，则只需使用React的

renderComponentToString

，它接受组件并通过回调返回HTML字符串：

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

现在你可以写了

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

$（this.getDOMNode（））.popover({
回答：是的，
内容：
});

---

在

componentDidMount

方法中，并使其正确呈现。如果您查看链接的JSFIDLE，您将看到我制作的一个通用的

包装器，它负责为您处理所有引导调用，包括在包装器组件从DOM中删除后正确清理popover组件。

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

如果包含此模块，则可以使popover成为自己的组件，您可以将其保存在变量中，然后在渲染函数中使用

他们的例子是：

const positionerInstance=(
点击
悬停
集中
单击+根关闭
);

React.render（定位器状态、mountNode）

我的代码：

showMoreDetails:函数（对象、列）{

var popOver=(
{
columns.map（col=>
{col.label}：
{obj[col.key]}
)
}
);
返回(
更多
);
},
在发布了这个回复，并对这个解决方案进行了测试和工作之后，我意识到它不是最优的

引导下拉菜单在用户与之交互后立即关闭。这可能不是期望的行为（在我的例子中，我插入了一个日期选择器，用户不必重新打开菜单来选择新日期，就不能更改月份）


我也有同样的问题，我想出了一个简单的替代方案

我不想使用react bootstrap（我的应用程序的其他部分没有react化并使用bootstrap，所以我不想让两个库做同样的事情）

Bootstrap提供的现成下拉组件几乎提供了与popover相同的功能，只是它更灵活。
这是标准引导下拉列表：

<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上的类“dropdown”；（ii）触发器上的数据切换属性“dropdown”（您可以将触发器更改为所需的任何html元素）；以及（iii）下拉菜单上的类“dropdown menu”（您也可以将其更改为所需的任何html元素，并且不必粘贴“ul”元素（由Bootstrap提出）

与popover相比，您失去了一些功能（您不能定义自己的转换，您不能让它们显示在顶部、左侧或右侧，但只能显示在下方——这是一个下拉列表）但您可以完全控制下拉列表/popover的内容。
解决此问题的另一种方法是，在包含popover的组件（即“页面”）的呈现函数中包含您希望成为popover内容的react组件，但将其放在样式为“display:none”的div中因此，它不会显示，也不会占用空间，还需要给它一个id，例如“popOverContent”。然后在初始化popover集内容时：document.getElementById（“PopoOverContent”）。至少在Bootstrap4中，它将一个元素作为内容

您不需要以这种方式修改引导代码，从而使维护/更新更容易。
在第一个呈现静态popover的示例中，
React.renderComponentToString
具有（尽管实际实现不是异步的，但API是以这种方式设计的，以备将来需要）。因此，您需要将其更改为
React.renderComponentToString（，函数（标记）{$（this.getDOMNode（））.popover（{html:true，content:markup}）；}.bind（this））（React v0.9更改了React.renderComponentToString，使之具有同步API；只是相应地更新了示例。）这对我来说很有效，但我必须添加一个触发器：手动，以使其仅在单击链接时打开和关闭。无需修补Bootstrap的弹出框。只需使用jQuery即可添加事件处理程序：
$（this.getDOMNode（））.popover（{html:true，content:React.renderToString（）}）.parent（）.on（'change'，'input[name=“icon”]”，this.handleChange）React.renderComponent（，$SomeJQueryNode[0]）刚刚救了我一天！谢谢
<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>

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