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

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

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

注意：

• localRef和parentRef模式是从Optional forwardRef that is required inside - ReactJS中提取的，它似乎是一种规范可选裁判以这种方式发送的不错的方式。
• --这是一个孤立的例子，我想找出如何支持这种代码模式。在没有forwardRef的情况下，还有其他方法来实现我正在实现的功能。我要求的不是与我的画布特性相关的解决方案，而是要求澄清如何驯服react和反应的类型。

Answer 1

我最终使用了这个解决方案，因为我确信我只想支持普通裁判或者根本不支持推荐，并且就像问题状态的第一个注释(来自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
// ...