5

OverlayTrigger 内にポップオーバーがあります。

私はそれを次のように定義します

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

次に、次のように要素の 1 つの中でレンダリングします。

<li>{myOverlayTrigger}</li>

OverlayTrigger 自体を内部でレンダリングしたいのですが<li>、ドキュメントで定義されているように、ボディ内でレンダリングします。container 属性を使用して、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。

    myOverlayTrigger が定義された後に定義されているため、コンテナーとして自分自身を割り当てることは明らか<li>...</li>に機能しません。

    質問: 正しい使い方は?

    • 4

    1 に答える 1

    7

    ReactBootstrap.Overlayドキュメントに記載されている理由により、推奨されます。

    OverlayTrigger コンポーネントはほとんどのユースケースに適していますが、より高度な抽象化であるため、より微妙な動作やカスタムの動作を Overlay コンポーネントに組み込むために必要な柔軟性に欠ける場合があります。このような場合、トリガーを使用せずにオーバーレイ コンポーネントを直接使用すると便利です。

    あなたの場合、以下のコードはコンポーネントを React属性ReactBootstrap.Overlayを持つリスト項目にレンダリングします。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>
    于 2015-10-11T06:10:46.037 に答える