1

这个 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 (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>

4

1 回答 1

3

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

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

被<MyPopover />安装到 <textarea#username>，这是不正确的，因为它实际上将render()结果设置<MyPopover /> 为节点的文本textarea......之后 React 在这里找不到预期的 DOM 节点，<noscript></noscript>并且不得不抱怨DOM 意外变异。您可以挂载到另一个可挂载的 DOM 节点以消除此错误。

此外，<Portal>只需将您的<Popover>into document.body, 定位<Popover>在 textarea 的右下方，尝试<Position>or <Overlay>。见JSFiddle

于 2015-07-16T05:10:22.977 回答