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

发布时间：2020-12-15 09:31:54 所属栏目：百科来源：网络整理

导读：我在OverlayTrigger里面有一个popover. 我把它定义为 const myOverlayTrigger = ReactBootstrap.OverlayTrigger placement='bottom' overlay={ReactBootstrap.Tooltip.../ReactBootstrap.Tooltip} {myContent} /ReactBootstrap.OverlayTrigger; 然后我在我的

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

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

显然分配< li> …< / li>本身作为容器不起作用,因为它是在定义myOverlayTrigger后定义的.

问题：如何使用它？

解决方法

建议使用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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!