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

Question

我正在尝试像这样向 React 组件添加一个 ref:

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功能。