如何将从 useRef 创建的引用分配给 Reacr Typescript 中的子组件？

Question

所以我有打字稿反应项目，我想观察正在查看的某些子组件，为了实现这一点，我使用 IntersectionObserver 和 refs。在我的父组件中，我有一个从另一个文件导入的介绍组件，我试图将 introRef 传递到该组件中以用于引用介绍中的元素

introRef = useRef(null)
...
<Introduction ref={introRef} />

我的简介组件定义如下：

import React, { forwardRef, LegacyRef } from "react";
import myInfo from "../myInfo.json";


const Introduction = forwardRef<HTMLElement, React.HTMLProps<HTMLElement>>((ref) => {
    return (
      <section ref={ref} className="Introduction">  
          <p className="greeting">Welcome</p>
          <p className="intro">{myInfo.introduction}</p>
          <div className="picture">
          {/* <PixelateToUnpixelate src={myInfo.myPicture} /> */}
          </div>
      </section>
    );
  });
  
  export default Introduction;

在线：

<section ref={ref} className="Introduction">

我收到错误： 类型“HTMLProps”不可分配给类型“LegacyRef |”未定义'

为了解决这个问题，我尝试将简介的声明更改为以下内容

const Introduction = forwardRef((ref:LegacyRef<HTMLElement>) => {
    return (
      <section ref={ref} className="Introduction">  
          <p className="greeting">Welcome</p>
          <p className="intro">{myInfo.introduction}</p>
          <div className="picture">
          {/* <PixelateToUnpixelate src={myInfo.myPicture} /> */}
          </div>
      </section>
    );
  });

这里的问题消失了，但是当我尝试在父组件中使用Introduction组件并将pass introRef传递到Introduction中时，我收到错误：

Type '{ ref: MutableRefObject<null>; }' is not assignable to type 'IntrinsicAttributes & (LegacyRef<HTMLElement> & RefAttributes<unknown>)'.
  Property 'current' is missing in type '{ ref: MutableRefObject<null>; }' but required in type 'RefObject<HTMLElement>'

所以我再次将我的简介组件代码更改为：

const Introduction = forwardRef((ref:React.MutableRefObject<null>) => {
    return (
      <section ref={ref} className="Introduction">  
          <p className="greeting">Welcome</p>
          <p className="intro">{myInfo.introduction}</p>
          <div className="picture">
          {/* <PixelateToUnpixelate src={myInfo.myPicture} /> */}
          </div>
      </section>
    );
  });

现在，当我尝试将 introRef 传递到简介中时，出现此错误：

Property 'current' is missing in type '{ ref: MutableRefObject<null>; }' but required in type 'MutableRefObject<null>'.

根据 React useRef 的文档，我不知道如何解决这个问题：

current: Initially, it’s set to the initialValue you have passed. You can later set it to something else. If you pass the ref object to React as a ref attribute to a JSX node, React will set its current property.

因此，如果我不将 ref 对象传递给 JSX 节点的 ref 属性（在本例中为简介），我就不可能拥有当前属性。

我也尝试过在不将Introduction包装在forwardRef中的情况下这样做，也出现了类似的问题。

我做错了什么，如何创建一个引用并将其传递给 typescript React 中的子组件，请提供解释，谢谢

Answer 1

将类型提供给

forwardRef<...>

-

type IntroProps = {
  children: R.ReactNode
}

const Intro = R.forwardRef<HTMLDivElement, IntroProps>((props, ref) => (
  <div
    ref={ref}
    children={props.children}
    style={{
      backgroundColor: "orchid",
      color: "white",
      padding: "1rem",
    }}
  />
))

function Foo() {
  const ref = R.useRef<null | HTMLDivElement>(null)
  return <Intro ref={ref}  children="hello world" />
}

TypeScript Playground 上的演示