ReactBootstrap OverlayTrigger容器属性如何工作？

Question

我在OverlayTrigger里面有一个popover.

我把它定义为

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

然后我在我的一个元素中渲染它:

<li>{myOverlayTrigger}</li>

我想在内部渲染OverlayTrigger,<li>但它在内部渲染,如文档中所定义.我正在尝试使用容器属性在父级内部进行渲染<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组件呈现为具有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>