Передача ссылки через номер

Question

Я написал простой хук для отображения всплывающего меню при нажатии кнопки. У меня проблема с передачей buttonRef. Кажется, он передается компоненту, однако элемент расположен неправильно, как будто онне передается вообще.

Я включил пример в codeSanbox: https://codesandbox.io/s/9o03qx3n3o

Я подтвердил, что это работает, когда не в ловушке, инструменты React dev показывают, что он проходитодин и тот же элемент в обоих случаях.Я пытался использовать forwardRef, та же проблема, я пытался использовать стандартное состояние для сохранения ссылки безрезультатно;

--- 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, которая изначально не была назначена элементу button. Он будет назначен только после первоначального рендеринга и публикации того, что вы не выполняете повторный рендеринг своего приложения, чтобы повторно инициализировать ваш хук, чтобы он получил правильную ссылку. Также вы пытаетесь вписаться в нестандартный крючок там, где он вам не нужен. То, чего вы пытаетесь достичь, можно просто сделать с помощью компонентной модели.

Ваш код Поппера будет выглядеть как

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);

Рабочая демоверсия