カスタムリアクション・ブートストラップ・ポップオーバー

Question

ブートストラップ・ポップ・オーバーに基づいてカスタム・リアクション・ポップ・オーバーを作成したいと思います。

は、私は新しい反応コンポーネントと呼ばれるMyTooltip作成：

import React, {Component} from 'react'; 
import { Popover } from 'react-bootstrap'; 

export default class MyPopover extends Component{ 
    constructor(props){ 
    super(props); 
    } 

    render() { 
    return (
     <Popover id="popover-trigger-focus" title={this.props.title}> 
      { return this.props.children } 
     </Popover> 
    ); 
    } 
} 

を、私の主成分で私はトリガーを作成してみました：

export default class MyMainComponent extends Component{ 

    render() { 

    const popoverFocus = (
     <MyPopover id="tooltip-trigger-focus" title="My Title"> 
      my text <b>my bold text</b> my text 
     </MyPopover > 
    ); 

    return (
     <div > 

      <OverlayTrigger trigger="focus" placement="bottom" overlay={popoverFocus}> 
      <Button>Focus</Button> 
      </OverlayTrigger> 

     </div> 
    ); 
    } 
} 

をしかし、それは動作しません。ボタンは非表示になり、ポップオーバーに正しいテキストが表示されますが、ポップオーバーでは「配置」プロパティは無視され、フェードアニメーションはありません。

すべてのヘルプは有用であろう...

Answer 1

あなたは<OverlayTrigger/>要素にplacementとoverlay小道具を設定しているが、それらはPopoverに帰属します。あなたはすぐにポップオーバーがそうのようなトリガ素子から小道具を継承させることで、この問題を解決することができます

render() { 
    return (
    <Popover id="popover-trigger-focus" title={this.props.title} {...this.props}> 
     { this.props.children } 
    </Popover> 
); 
} 

Here's your example with {...this.props}。

PS：JSをJSXで返す必要はありません（例：{ return this.props.children }）。あなたはそれをそのまま残すことができます（{ this.props.children }）。