添加類型以在 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} />;
};