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

Question

我正在尝试使用 react-bootstrap 库在未使用 React 构建的现有页面上显示 Popover。 fiddle 有一个香草 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 (e.g., 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 节点的文本...之后 React 找不到预期的 DOM 节点，<noscript></noscript> 这里，不得不抱怨 the DOM 意外变异。您可以挂载到另一个可挂载的 DOM 节点以消除此错误。

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

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

React-Bootstrap Popover on non-react element - wrong position and invariant error

javascript

twitter-bootstrap

reactjs

react-bootstrap