reactjs - 为什么 TypeScript 中 Material-ui Button 元素的 React.createRef() 不能正常工作？

Question

使用 React v16.13.1 我有以下组件类，其中包含一个 Material-UI Button 组件和一个 RefObject 来访问按钮元素。

class Search extends React.Component<any, any>{

  constructor(props: any) {
    super(props)

    this.streetViewRef = React.createRef();
  }

  private streetViewRef: React.RefObject<Button>;
}

对于以下 Button 元素

<Button ref={this.streetViewRef} size="sm" variant="primary" block >Street View</Button>

但是，会显示以下 TypeScript 错误。

需要改变什么来纠正这个错误？

标签： reactjstypescriptmaterial-ui

Answer 1

看看这里https://www.selbekk.io/blog/2020/05/forwarding-refs-in-typescript/

键入 forwardRef 组件的正确方法是：

type Props = {};
const Button = React.forwardRef<HTMLButtonElement, Props>(
  (props, ref) => <button ref={ref} {...props} />
);