Question

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

我无法创建Popover组件。

问题在于，当我调用Popover容器时，它从屏幕的左上角飞过。但是在使用普通反应框架创建相同的popover时。一切都很好。

代码片段：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

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;

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

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

Answer 1

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

由于输入错误，我将undefined传递给anchorEl组件的<Popover>道具。没有有效的锚点，我相信Popover默认为视口的左上角。

Answer 2

当我使popover组件无状态，然后将其导入我的父容器时，发生了这种情况。我忘了将anchorEl作为道具传递，最后在左上方显示了一个菜单。如果弹出框中有错误，默认情况下菜单会这样做。

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

2 个答案: