Question

我正在尝试使用react-bootstrap库在没有React的现有页面上显示Popover。这个小提琴有一个vanilla Bootstrap popover的例子和一个用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

在选择math.pow()的子节点的DOM节点期间发生错误，因为在行

中

<MyPopover />

var reactUsername = React.render(<MyPopover .../>, document.querySelector('#username'));已加载到 <MyPopover />，这是不正确的，因为它实际设置了<textarea#username> render()的结果作为<MyPopover />节点的文本......在此之后，React无法找到预期的DOM节点textarea，并且必须抱怨 DOM意外突变。您可以挂载到另一个可安装的DOM节点以消除此错误。

此外，<noscript></noscript>仅将<Portal>放入<Popover>，将document.body置于文本区域下方，尝试<Popover>或<Position> 。见JSFiddle

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

1 个答案: