reactjs - Hur man skapar en ref med Typescript och styled-components

Jag försöker lägga till en ref till en React-komponent på följande sätt:

const Dashboard: React.FC = () => {
  const [headerHeight, setHeaderHeight] = useState(0);

  const headerRef = React.createRef<HTMLInputElement>();
  useEffect(() => {
    // @ts-ignore: Object is possibly 'null'
    setHeaderHeight(ref.current.clientHeight)
  });

  return (
    <Root>
      <Header ref={headerRef} />

      <div>other contents</div>             
    </Root>
  );
};

<Header /> är en enkel React.FC. TS ger ett felmeddelande som säger:

Typen '{ ref: RefObject; }' kan inte tilldelas typen 'IntrinsicAttributes & { children?: ReactNode; }'. Egenskapen 'ref' finns inte på typen 'IntrinsicAttributes & { children?: ReactNode; }'

Hur kan jag övervinna detta problem?

Svar #1

Det ser ut som att du försöker ge en ref som är typad för ett input-element till en annan React-komponent. Om du försöker vidarebefordra refen till ett element inuti Header-komponenten kan du använda Reacts forwardRef-funktion.