为什么 TypeScript 中 material-ui Button 元素的 React.createRef() 无法正常工作？

IT技术 reactjs typescript material-ui
2021-05-10 12:32:47

使用 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 错误。

在此处输入图片说明

需要更改什么来纠正此错误？

2个回答

看看这里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} />
);

您需要使用 HTMLDivElement 创建 ref。

createRef<HTMLDivElement>()

所以，这样会更好。

private streetViewRef = createRef<HTMLDivElement>();
其它你可能感兴趣的问题
上一篇react-native错误：日期值不能从字符串转换为双精度 下一篇在 react-router-dom 中的某些页面上隐藏标题