Javascript 非React元素上的React Bootstrap Popover-位置错误和不变错误

这说明了问题所在

我正在尝试使用该库在现有页面上显示一个Popover，该页面是在没有React的情况下构建的。fiddle有一个香草引导popover示例和一个使用react引导创建的示例

有三个错误：

• 弹出窗口在元素上的位置不正确，它位于主体的顶部

• 在
  元素中，反应输出

• 在控制台中，它抛出错误

  未捕获错误：不变冲突：findComponentRoot（…，.0）：无法找到元素。这可能意味着DOM发生了意外的变化（例如通过浏览器），通常是因为在使用表、嵌套标记（如，）或在父级中使用非SVG元素时忘记了。尝试检查具有React ID``的元素的子节点。

我肯定我做错了什么，我只是不知道那是什么

var Portal=ReactBootstrap.Portal；
var Popover=ReactBootstrap.Popover；
//动态创建弹出窗口并使用引导显示它
var$username=$（“#username”）；
var showsbootstrappover=函数（）{
$username.popover（{
位置：'顶部'，
标题：“香草引导Popover”，
内容：'我是一个香草引导流行音乐'
}).popover（“show”）；
}
var MyPopover=React.createClass({
render:function（）{
返回(
document.querySelector（this.props.target）}
show={true}>
我应该在文本区的底部
);
}
});
var reactUsername=React.render（，document.querySelector（'#username'）；
showbootstrappover（）；
reactUsername.setState（{show:true}）
在拾取
的子节点的DOM节点时发生错误，因为

var reactUsername = React.render(<MyPopover .../>, 
                                 document.querySelector('#username'));

var reactUsername=React.render（，
document.querySelector（“#username”）；

被装入
，这是不正确的，因为它实际设置了
的
render（）
结果
由于
textarea
节点的文本…之后，React无法在此处找到预期的DOM节点，
，并且不得不抱怨DOM意外发生了变异。您可以装载到另一个可装载的DOM节点以消除此错误

此外，
仅将您的
放入
文档.正文
，若要将
放在文本区域的正下方，请尝试
或
。见
太好了，非常感谢@okm！现在这就更有意义了。