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提示错误：

键入'{ref：RefObject; }'不能分配给'IntrinsicAttributes＆{children ?: ReactNode; }'。属性'ref'在类型'IntrinsicAttributes＆{children ?: ReactNode; }'

我该如何克服这个问题？

Answer 1

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

如何使用Typescript和样式化组件创建引用

1 个答案: