传递引用到钩子问题

Question

我写了一个简单的钩子来在单击按钮时显示波普尔菜单，我在传递 buttonRef 时遇到了问题，它似乎正在将其传递给组件，但元素没有正确定位，就好像它根本没有传递一样。

我在codeSanbox上包括了一个示例：https://codesandbox.io/s/9o03qx3n3o

我已经确认这在不在钩子内时有效，React 开发工具显示它在两个实例中传递相同的元素。我尝试使用 forwardRef，同样的问题，我尝试使用标准状态来存储 ref 无济于事;

--- Hook ---
const usePopperMenu = btnRef => {
  const [open, setOpen] = useState(false);
  const handleClose = event => {
    if (btnRef.current.contains(event.target)) {
      return;
    }
    setOpen(false);
  };
  const elems = ({ children }) => (
    <Popper
      open={open}
      anchorEl={btnRef.current}
      placement="bottom"
      transition
      disablePortal
    >
      {({ TransitionProps, placement }) => (
        <Grow
          {...TransitionProps}
          id="menu-list-grow"
          style={{
            transformOrigin:
              placement === "bottom" ? "center top" : "center bottom"
          }}
        >
          <Paper>
            <ClickAwayListener onClickAway={e => handleClose(e)}>
              <MenuList>{children}</MenuList>
            </ClickAwayListener>
          </Paper>
        </Grow>
      )}
    </Popper>
  );
  return [elems, setOpen, open];
};
--- App/Component ---
function App() {
  const btnRef = useRef(null);
  const [Menu, setOpen, open] = usePopperMenu(btnRef);
  return (
    <div className="App">
      <div>
        <Button
          buttonRef={btnRef}
          onClick={() => setOpen(!open)}
          variant="outlined"
          color="secondary"
        >
          Click Me!
        </Button>
        <Menu>
          <MenuItem>
            <Typography color="textPrimary">Menu Item 1</Typography>
          </MenuItem>
          <MenuItem>
            <Typography color="textPrimary">Menu Item 2</Typography>
          </MenuItem>
        </Menu>
      </div>
    </div>
  );
}

Answer 1

它对我有用 - 问题出在您的 css 样式上。按钮容器是全尺寸的，display:grid这就是下拉列表放错位置的原因

尝试：

.App {
  display: flex;
  justify-content: center;
}

https://codesandbox.io/s/oprzyv665?fontsize=14

Answer 2

代码中的问题是，您运行钩子并将 ref 传递给它，该钩子最初并未分配给按钮元素。它只会在初始渲染后分配，并发布您不重新渲染您的应用程序以重新初始化您的钩子，以便它获得正确的 ref。此外，您正在尝试在不需要它们的地方适应自定义钩子。您尝试实现的目标可以简单地使用组件模型来完成。

您的波普尔代码将看起来像

import React, { useState } from "react";
import Grow from "@material-ui/core/Grow";
import Paper from "@material-ui/core/Paper";
import Popper from "@material-ui/core/Popper";
import ClickAwayListener from "@material-ui/core/ClickAwayListener";
import MenuList from "@material-ui/core/MenuList";
const PopperMenu = ({ target, children, open, handleClose }) => (
  <Popper
    open={open}
    anchorEl={target.current}
    placement="bottom"
    transition
    disablePortal
  >
    {({ TransitionProps, placement }) => (
      <Grow
        {...TransitionProps}
        id="menu-list-grow"
        style={{
          transformOrigin:
            placement === "bottom" ? "center top" : "center bottom"
        }}
      >
        <Paper>
          <ClickAwayListener onClickAway={e => handleClose(e)}>
            <MenuList>{children}</MenuList>
          </ClickAwayListener>
        </Paper>
      </Grow>
    )}
  </Popper>
);
export default PopperMenu;

你可以像这样使用它

import React, { useRef, useState } from "react";
import ReactDOM from "react-dom";
import Button from "@material-ui/core/Button";
import Typography from "@material-ui/core/Typography";
import MenuItem from "@material-ui/core/MenuItem";
import PopperMenu from "./hooks";
import "./styles.css";
function App() {
  const btnRef = useRef(null);
  const [open, setOpen] = useState(false);
  const handleClose = event => {
    if (btnRef.current.contains(event.target)) {
      return;
    }
    setOpen(false);
  };
  return (
    <div className="App">
      <div>
        <Button
          buttonRef={btnRef}
          onClick={() => setOpen(!open)}
          variant="outlined"
          color="secondary"
        >
          Click Me!
        </Button>
        <PopperMenu target={btnRef} handleClose={handleClose} open={open}>
          <MenuItem>
            <Typography color="textPrimary">Menu Item 1</Typography>
          </MenuItem>
          <MenuItem>
            <Typography color="textPrimary">Menu Item 2</Typography>
          </MenuItem>
        </PopperMenu>
      </div>
    </div>
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

工作演示