reactjs - ReactBootstrap OverlayTrigger 容器属性如何工作？

Question

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

我将其定义为

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

然后我将其渲染在我的一个元素中，如下所示:

<li>{myOverlayTrigger}</li>

我想在<li>内渲染OverlayTrigger本身但它按照文档中的定义呈现在主体内部。我正在尝试使用容器属性将其呈现在父级 <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:$3.1.1">
    <li data-reactid=".0.1.0.0.0.0.0.1.1.1.1:$3.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:$3.1.1.1">,</span>
    <noscript data-reactid=".0.1.0.0.0.0.0.1.1.1.1:$3.1.1.2"></noscript>
</ul>