Как использовать React useRef hook с машинописью?

Question

Я создаю ссылку, используя новый хук useRef

const anchorEl = React.useRef<HTMLDivElement>(null)

И использую как

<div style={{ width: "15%", ...flexer, justifyContent: "flex-end" }}>
    <Popover
        id="simple-popper"
        open={open}
        anchorEl={anchorEl}
        onClose={() => {
          setOpen(false)
        }}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'center',
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'center',
        }}
    >
        <Typography>The content of the Popover.</Typography>
    </Popover>
</div>
<div ref={anchorEl} >
      ...

, но я получаю эту ошибку

TS2322: Type 'MutableRefObject<HTMLDivElement>' is not assignable to type 'HTMLElement | ((element: HTMLElement) => HTMLElement)'.
  Type 'MutableRefObject<HTMLDivElement>' is not assignable to type '(element: HTMLElement) => HTMLElement'.
    Type 'MutableRefObject<HTMLDivElement>' provides no match for the signature '(element: HTMLElement): HTMLElement'.
Version: typescript 3.2.2, tslint 5.12.0

Answer 1

Переменная

anchorEl является объектом ref, объектом, обладающим только свойством current.Неизвестно, как работает Popover, но он ожидает элемент как anchorEl prop, а не ref.

Должно быть:

Если <Popover и <div ref={anchorEl} > если братья и сестры похожи на показанные, ссылка не будет готова к использованию в тот момент, когда она считается реквизитом.В этом случае компонент должен быть перерисован при монтировании:

const [, forceUpdate] = useState();

useEffect(() => {
  forceUpdate();
}, []);

...

   { anchorEl.current && <Popover
        id="simple-popper"
        open={open}
        anchorEl={anchorEl.current}
        ...
   }
   <div ref={anchorEl} >

Если <div ref={anchorEl} > не нужно выводить в DOM, это может быть

   <Popover
        id="simple-popper"
        open={open}
        anchorEl={<div/>}

Необходимость рендеринга компонента дважды и использования обходного пути forceUpdate предполагает, что это можно сделать лучше.Фактическая проблема здесь в том, что Popover принимает элемент как опору, в то время как принятие ссылок является обычным явлением в React.