ReactBootstrap OverlayTrigger 容器属性是如何工作的？

Question

我在 OverlayTrigger 中有一个弹出窗口。

我定义为

const myOverlayTrigger = <ReactBootstrap.OverlayTrigger 
    placement='bottom' overlay={<ReactBootstrap.Tooltip>...</ReactBootstrap.Tooltip>}>
    {myContent}
  </ReactBootstrap.OverlayTrigger>;

然后我将它渲染在我的元素之一中：

<li>{myOverlayTrigger}</li>

我想在 <li> 内渲染 OverlayTrigger 本身，但它在 body 内渲染，如文档中所定义。我正在尝试使用容器属性在父 <li> 中呈现它。

首先，我尝试将 ID 分配给 <li> 并将此 ID 作为字符串传递给 container=...（这不是最佳方式）。

其次，我尝试创建附加元素 <span></span> 并将其与 {myOverlayTrigger} 一起呈现在

中。我也将它（分配给变量）传递给容器属性

const c = <span></span>;
... container={c} ...
<li>{c} {myOverlayTrigger}</li>

两种方法都始终给出错误 not a dom element or react component。

显然将 <li>...</li> 本身指定为容器也不起作用，因为它被定义在 myOverlayTrigger 被定义之后。

提问：如何正确使用？

Answer 1

ReactBootstrap.Overlay 推荐，原因在 document.

中列出

The OverlayTrigger component is great for most use cases, but as a higher level abstraction it can lack the flexibility needed to build more nuanced or custom behaviors into your Overlay components. For these cases it can be helpful to forgo the trigger and use the Overlay component directly.

对于您的情况，下面的代码将 ReactBootstrap.Overlay 组件呈现为具有 React ref 属性的列表项。

getInitialState() {
    return (
        show: false
    );
},
render() {
    return (
        <ul>
            <li ref="dest" onClick={ () => {
                this.setState( { show: !this.state.show } );
            }}>my contents</li>
            <ReactBootstrap.Overlay placement="bottom"
                show={ this.state.show } container={ this.refs.dest }>
                <ReactBootstrap.Tooltip>tooltip</ReactBootstrap.Tooltip>
            </ReactBootstrap.Overlay>
        </ul>
    );
}

当通过单击显示工具提示时，结果 HTML 将是

<ul data-reactid=".0.1.0.0.0.0.0.1.1.1.1:.1.1">
    <li data-reactid=".0.1.0.0.0.0.0.1.1.1.1:.1.1.0">
        contents
        <div>
            <div role="tooltip" class="fade in tooltip right" data-reactid=".3">
                <div class="tooltip-arrow" data-reactid=".3.0"></div>
                <div class="tooltip-inner" data-reactid=".3.1">My tooltip</div>
            </div>
        </div>
    </li>
    <span data-reactid=".0.1.0.0.0.0.0.1.1.1.1:.1.1.1">,</span>
    <noscript data-reactid=".0.1.0.0.0.0.0.1.1.1.1:.1.1.2"></noscript>
</ul>

ReactBootstrap OverlayTrigger 容器属性是如何工作的？

How does ReactBootstrap OverlayTrigger container property works?

reactjs

react-bootstrap

ReactBootstrap OverlayTrigger 容器 属性 是如何工作的？

How does ReactBootstrap OverlayTrigger container property works?

reactjs

react-bootstrap

ReactBootstrap OverlayTrigger 容器属性是如何工作的？