React+TS中使用ref属性遇到的坑

在React中使用ref属性问题:

在React 16.3及以上版本中使用:
Refs是使用React.createRef()创建的,并通过ref属性附加到React元素。在构造组件时,通常将Refs分配给实例属性(LeftElectricity ),以便可以在整个组件中引用它们。

export default class LeftElectricity extends React.Component<{buildName:string}> {
  constructor(props:{buildName:string}) {
    super(props)
    this.domWidth = React.createRef();
  }
  render(){
      return(
         
) } }

报错:TS2339:property ‘domWidth’ does not exist on type 'LeftElectricity’
这是TS语法检测报的错
解决:在constructor之前插入这一行代码:

private domWidth: React.RefObject;

获取ref属性的当前DOM宽高:
在componentDidMount中可以this来获取这么写:

componentDidMount(): void {
    const domWidth:any= this.domWidth.current
 this.setState({width:domWidth.clientWidth/2})
  }

但是在static getDerivedStateFromProps中就不能采用this.的方式来获取

static getDerivedStateFromProps(nextProps: any, prevState: any) {
    const domWidth:any= this.domWidth.current//报错
    }

原因:getDerivedStateFromProps里面的this为undefined
static静态方法只能Class(构造函数)来调用(App.staticMethod),而实例是不能的( (new App()).staticMethod );
当调用React Class组件时,该组件会实例化;
所以,React Class组件中,静态方法getDerivedStateFromProps无权访问Class实例的this,即this为undefined。
注意:
默认情况下,你不能在函数组件上使用 ref 属性,因为它们没有实例:
如果要在函数组件中使用 ref,你可以使用 forwardRef(可与 useImperativeHandle 结合使用),或者可以将该组件转化为 class 组件。
不管怎样,你可以在函数组件内部使用 ref 属性,只要它指向一个 DOM 元素或 class 组件

重点提示:

一定要看清当前项目中react的版本,因为在16.3之前的版本是通过字符串或回调函数方式来使用ref属性的
1.字符串
通过 this.refs.test 来引用真实dom的节点
dom 节点上使用

 

2.回调函数
回调函数就是在dom节点或组件上挂载函数,函数的入参是dom节点或组件实例,达到的效果与字符串形式是一样的,
都是获取其引用。

{this.textInput=input}} 

最后要弄清楚到底是TS语法报错还是React语法报错!

你可能感兴趣的:(react,TypeScript)