如何使用 Typescript 和 styled-components 创建 ref

Question

我正在尝试将 ref 添加到 React 组件，如下所示：

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 /> 是一个简单的 React.FC。 TS 报错说：

Type '{ ref: RefObject; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'. Property 'ref' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'

我该如何解决这个问题？

Answer 1

看起来您正在尝试将输入元素的 ref 类型提供给另一个 React 组件。如果你试图将 ref 转发给 Header 组件内的元素，你可以使用 React 的 forwardRef 函数。

如何使用 Typescript 和 styled-components 创建 ref

How to create a ref using Typescript and styled-components

ref

typescript

reactjs

styled-components