React Material UIの位置付けが正しくない

Question

私はで提供されているすべてのユーティリティ用に、Reduxフレームワークを使用して別々のコンポーネントを作成しています。

私はPopoverコンポーネントの作成に固執しました。

Popover Containerを呼び出すと、画面の左上隅から飛んでしまうという問題があります。ただし、単純なフレームワークを使用して同じポップオーバーを作成する場合。すべてがうまくいきます。

コードのスニペット：Popover.js

 

class PopoverTip extends Component { 

    constructor(props) { 
     super(props); 
    } 

    handleRequestClose =() => { 
    this.props.togglePopover(); 
    }; 

    render() { 
    const { isOpen, anchorEl } = this.props; 
    return (
     < div> 
     {isOpen && < Popover 
      open={isOpen} 
      anchorEl={anchorEl} 
      anchorOrigin={{horizontal: 'left', vertical: 'bottom'}} 
      targetOrigin={{horizontal: 'left', vertical: 'top'}} 
      animation={PopoverAnimationVertical} 
      onRequestClose={this.handleRequestClose}> 
      < Menu> 
      < MenuItem primaryText="Refresh" /> 
      < MenuItem primaryText="Help &amp; feedback" /> 
      < MenuItem primaryText="Settings" /> 
      < MenuItem primaryText="Sign out" /> 
      </ Menu> 
     </ Popover>} 
     </ div> 
    ); 
    } 
} 

export default PopoverTip; 
 

ExampleComponent.js - 私はポップオーバーの要素を呼び出して、ポップオーバーに

 

showPopover(event) { 
    event.preventDefault(); 
    this.props.togglePopover(event.currentTarget); 
}; 

<IconButton onClick={ this.showPopover.bind(this) }> 
    <HelpIco /> 
</IconButton> 
<PopoverTip /> 
 

を示していた場所から

Popover機能は正常に機能しており、実際には現在の要素であるevent.currentTargetも渡しています。

私が直面する唯一の問題は、そのポップオーバーの配置です。

Answer 1

これは少し遅れていますが、私は自分のプロジェクトでこの問題を修正しました。

私はundefinedを<Popover>のanchorEl小道具に渡していました。有効なアンカーがなければ、Popoverはデフォルトでビューポートの左上に設定されます。

Answer 2

これは私がポップオーバーコンポーネントをステートレスにして、それを親コンテナにインポートしたときに起こったことです。私は小道具としてanchorElを渡すのを忘れて、左上のメニューで終わった。ポップオーバーにエラーがある場合、メニューはデフォルトでそれを行うようです。