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

Question

我在 OverlayTrigger 中有一个弹出框。

我将其定义为

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

然后我将它呈现在我的一个元素中，如下所示：

<li>{myOverlayTrigger}</li>

我想在内部渲染 OverlayTrigger 本身，<li>但它在内部渲染，如文档中所定义。我正在尝试使用容器属性在 parent 中呈现它<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推荐使用文档中列出的原因。

OverlayTrigger 组件非常适合大多数用例，但作为更高级别的抽象，它可能缺乏在 Overlay 组件中构建更细微或自定义行为所需的灵活性。对于这些情况，放弃触发器并直接使用 Overlay 组件会很有帮助。

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

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>