添加类型以在 React 中使用 TypeScript 从父级向子级传递 ref state 设置器

Question

我失去了几个小时，没有得到这个。 我尝试了很多例子，但没有任何效果。 我该如何解决这些挑战？ 我怎么知道 Typescript 想要什么样的类型来处理这些事情，以及为什么任何人都应该用 typescript 做这样的事情，因为在 JS 中它只是工作！

我只想将我的 useState 从父级传递给子级，并且我想将 div 的 Ref 设置为 useState，以便父级可以操纵 div（及其子级）。

const Parent: React.FC<iParent> = ({title}) => {
    
    const x = React.useRef() as React.MutableRefObject<HTMLDivElement>;;
    const refSetter = useState(x);

  return(
       <Child setMyRef={refSetter} />
  )

}



interface iChild {
  setMyRef: Dispatch<SetStateAction<React.MutableRefObject<HTMLDivElement>>>;
}
const Child: React.FC<iChild> = ({setMyRef}) => {
  
  const myRef = useRef(???type?);
  
  useEffect(() => {
    if(myRef.current){
        setMyRef(myRef);
    }
  }, [])

  return(
       <div ref={myRef} />
  )

}

Answer 1

您可以按如下方式进行。 是的，TypeScript 可能很冗长，但值得，你很快就会习惯。 一种了解什么变量类型的方法是读取您得到的错误以及您在 hover 超过一个时看到的内容。

import {Dispatch, FC, RefObject, SetStateAction, useEffect, useRef, useState } from "react";

interface iChild {
  setMyRef: Dispatch<SetStateAction<RefObject<HTMLDivElement> | null>>;
}
const Child: FC<iChild> = ({ setMyRef }) => {
  const myRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    setMyRef(myRef);
  }, [setMyRef]);

  return <div ref={myRef} />;
};

const Parent: FC<iParent> = ({ title }) => {
  const [ref, refSetter] = useState<RefObject<HTMLDivElement> | null>(null);

  return <Child setMyRef={refSetter} />;
};