ReactBootstrap OverlayTrigger 容器属性如何工作? [英] How does ReactBootstrap OverlayTrigger container property works?

问题描述

我在 OverlayTrigger 中有一个弹出框.

我定义为

const myOverlayTrigger = <ReactBootstrap.OverlayTriggerplacement='bottom' overlay={...}>{我的内容}</ReactBootstrap.OverlayTrigger>;

然后我将它呈现在我的元素之一中:

{myOverlayTrigger}

我想在

内部呈现 OverlayTrigger 本身，但它呈现在 body 内部，如文档中所定义.我正在尝试使用容器属性在父

中呈现它.

首先，我尝试将 ID 分配给

并将此 ID 作为字符串传递给 container=...(这不是最好的方法).

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

中.我也将它(分配给变量)传递给容器属性

const c = ;...容器={c} ...<li>{c} {myOverlayTrigger}</li>

这两种方法始终会给出错误不是 dom 元素或反应组件.

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

问题:如何正确使用?

解决方案

ReactBootstrap.Overlay 被推荐使用，原因列在 文档.

<块引用>

OverlayTrigger 组件适用于大多数用例，但作为更高级别的抽象它可能缺乏构建所需的灵活性将更细微或自定义的行为添加到您的 Overlay 组件中.为了在这些情况下，放弃触发器并使用叠加层可能会有所帮助直接组件.

对于您的情况，以下代码将 ReactBootstrap.Overlay 组件渲染为具有 React ref 属性的列表项.

getInitialState() {返回 (显示:假);},使成为() {返回 (<ul><li ref="dest" onClick={ () =>{this.setState( { 显示: !this.state.show } );}}>我的内容</li><ReactBootstrap.Overlay position="bottom"show={ this.state.show } container={ this.refs.dest }><ReactBootstrap.Tooltip>工具提示</ReactBootstrap.Tooltip></ReactBootstrap.Overlay>);}

当点击显示工具提示时，生成的 HTML 将是

<li data-reactid=".0.1.0.0.0.0.0.1.1.1.1:$3.1.1.0">内容<div><div role="tooltip" class="淡入工具提示右侧" data-reactid=".3"><div class="tooltip-arrow" data-reactid=".3.0"></div><div class="tooltip-inner" data-reactid=".3.1">我的工具提示</div>

<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>

I have a popover inside OverlayTrigger.

I define it as

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

Then I render it inside one of my elements like that:

<li>{myOverlayTrigger}</li>

I want to render OverlayTrigger itself inside <li> but it renders inside body, as defined in documentation. I'm trying to use container attribute to render it inside parent <li>.

First, I tried to assign ID to <li> and pass this ID as a string to container=... (which isn't a best way).

Second, I tried to create additional element <span></span> and render it inside

along with {myOverlayTrigger}. Also I pass it (assigned to variable) to container attribute

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

Both approaches consistently gives an error not a dom element or react component.

Obviously assigning <li>...</li> itself as a container doesn't work either as it being defined after myOverlayTrigger is defined.

Question: how to use it right?

解决方案

ReactBootstrap.Overlay is recommended for the reason listed in the 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.

For your case, the code below renders the ReactBootstrap.Overlay component into a list item with React ref attribute.

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>
    );
}

When the tooltip is displayed by clicking, the resulting HTML would be

<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>

这篇关于ReactBootstrap OverlayTrigger 容器属性如何工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！