Question

我在OverlayTrigger中有一个popover。

我将其定义为

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。

中列出的原因

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

对于您的情况，下面的代码将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>

ReactBootstrap OverlayTrigger容器属性如何工作？

1 个答案: