如何以类型安全的方式正确访问 React 中 forwardRef 元素的 ref.current？

Question

这是类型安全问题的一个最小示例：

https://codesandbox.io/s/mystifying-dream-8v7kgu?file=/src/App.tsx

const CanvasContainer = forwardRef<HTMLCanvasElement>((props, parentRef) => {
  const localRef = useRef<HTMLCanvasElement>(null);
  const canvasRef = parentRef ?? localRef;

  useEffect(() => {
    // type-safety no longer works here, see code sandbox link
    console.log(canvasRef.current);
  }, []);

  return <canvas ref={canvasRef} />;
});

使用 typescript， canvasRef可以不仅仅是一个React.RefObject<HTMLCanvasElement> 。 为什么，以及如何在这种情况下实现类型安全并访问.curent值？

笔记：

• localRef和parentRef模式取自ReactJS 内部需要的 Optional forwardRef ，并且似乎是规范以这种方式发送的可选 ref 的一种不错的方式。
• 这是一个孤立的案例，我想弄清楚如何支持这种代码模式。 还有其他方法可以实现我在没有 forwardRef 的情况下实现的功能。 我不是要求与我的画布功能相关的解决方案，而是要澄清如何反应和反应的类型可以被驯服。

Answer 1

我最终使用了这个解决方案，因为我确定我只想支持普通的 refs 或根本不支持 refs 并且就像问题状态的第一条评论（来自 Nikos）一样，ref 也可以是一个 setter 函数。

const CanvasContainer = forwardRef<HTMLCanvasElement>((props, parentRef) => {
    if (typeof parentRef === "function") {
        throw new Error(
            `Only React Refs that are created with createRef or useRef are supported`
        )
    }

    const localRef = useRef<HTMLCanvasElement>(null)
    const canvasRef = parentRef ?? localRef
// ...