创建组件时 React Material UI Popover 的错误定位

Question

我正在使用 Redux 框架为Material UI提供的每个实用程序创建单独的组件。

我在创建Popover组件时陷入困境。

问题是当我调用 Popover Container 时，它从屏幕的左上角飞出。但是，当使用普通的 React 框架创建相同的弹出窗口时。一切正常。

代码片段：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 - 从那里我调用 popover 元素并显示 popover

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

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

请注意，Popover 功能运行良好，我还传递了 event.currentTarget，它实际上是当前元素。

我面临的唯一问题是该弹出框的放置。

Answer 1

这有点晚了，但我只是在我自己的项目中解决了这个问题。

由于打字错误，我正在传递undefined给anchorEl我的<Popover>组件的道具。我相信，如果没有有效的锚点，Popover 默认位于视口的左上角。