如何在打字稿中使用 React useRef 钩子？

Question

我正在使用新的 useRef 挂钩创建引用

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

并使用 like

<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
    id="simple-popper"
    open={open}
    anchorEl={anchorEl.current}

如果 <Popover 和 <div ref={anchorEl} > 是兄弟姐妹，就像它显示的那样，ref 在作为 prop 传递时不会准备好使用。在这种情况下，组件需要在 mount:

上重新渲染

const [, forceUpdate] = useState(null);

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 接受一个元素作为 prop，而接受 refs 在 React 中很常见。

此时 ref 对象没有任何好处。 Ref callback 可以与 useState 一起使用，状态更新函数是接收新状态作为参数的回调，如果它接收到相同的状态（DOM 元素），它不会导致额外的更新:

const [anchorEl, setAnchorEl] = useState<HTMLDivElement>(null);

...

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

如何在打字稿中使用 React useRef 钩子？

How to use React useRef hook with typescript?

reactjs

typescript

typescript-typings

react-hooks