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

Question

这个JSFiddle说明了这个问题。

我正在尝试使用react-bootstrap库在没有React的现有页面上显示Popover。 小提琴有一个香草Bootstrap弹出窗口的示例，以及一个用react-bootstrap创建的示例。

有三个错误：

• 弹出框未正确放置在元素上，而是在主体顶部

• 在<textarea>元素中，React输出<noscript data-reactid=".0"></noscript>

• 在控制台中，它引发错误Uncaught Error: Invariant Violation: findComponentRoot(..., .0): Unable to find element. This probably means the DOM was unexpectedly mutated (eg, by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with React ID ``. Uncaught Error: Invariant Violation: findComponentRoot(..., .0): Unable to find element. This probably means the DOM was unexpectedly mutated (eg, by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with React ID ``.

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

 var Portal = ReactBootstrap.Portal; var Popover = ReactBootstrap.Popover; // Create the popup dynamically and show it with bootstrap var $username = $('#username'); var showBootstrapPopover = function() { $username.popover({ placement: 'top', title: 'Vanilla Bootstrap Popover', content: 'I am a vanilla Bootstrap Popover' }).popover('show'); } var MyPopover = React.createClass({ render: function() { return ( <Portal container={document.body} placement="bottom" target={() => document.querySelector(this.props.target)} show={true}> <Popover title="React Popover"> <div>I should be on the bottom of the textarea</div> </Popover> </Portal> ); } }); var reactUsername = React.render(<MyPopover target="#username" show={true} />, document.querySelector('#username')); showBootstrapPopover(); reactUsername.setState({ show: true }); 

 <div> <textarea id="username" rows="1" cols="60" type="text" class="form-control" placeholder="Username"></textarea> </div> 

Answer 1

在选择<MyPopover />的子代的DOM节点期间发生错误，因为该行

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

<MyPopover />被挂载到 <textarea#username> ，这是不正确的，因为它实际上将<MyPopover />的render()结果设置为textarea节点的textarea ...此后，React无法找到预期的DOM节点<noscript></noscript> ，并且不得不抱怨DOM被意外地突变了 。 您可以挂载到另一个可挂载的DOM节点来摆脱此错误。

此外， <Portal>仅将您的<Popover>放入document.body ，将<Popover>放置在文本区域的正下方，请尝试<Position>或<Overlay> 。 参见JSFiddle