reactjs - 创建组件时 React Material UI Popover 的位置错误

Question

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

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

问题是，当我调用 Popover 容器时，它从屏幕的左上角飞出。然而，当使用普通的 react 框架创建相同的弹出窗口时。一切工作正常。

代码片段:Popover.js

<p></p>

<pre><code>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;
</code></pre>

<p></p>

ExampleComponent.js - 从这里我调用弹出框元素并显示弹出框

<p></p>

<pre><code>showPopover(event) {
    event.preventDefault();
    this.props.togglePopover(event.currentTarget);
};

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

<p></p>

请注意，Popover 功能工作正常，我还传递了 event.currentTarget，它实际上是当前元素。

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

Answer 1

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

由于拼写错误，我传递了 undefined到anchorEl我的支柱<Popover>成分。我相信，如果没有有效的 anchor ，弹出窗口将默认位于视口(viewport)的左上角。