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

在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(
         <div id={'leftLine_main'}  ref={this.domWidth}>
           <DetailArea/>
        </div>
   )
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

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

private domWidth: React.RefObject<HTMLDivElement>;
1

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

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

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

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

原因：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 节点上使用

<input type ="text" ref="test"/> 
1

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

<input type="text" ref={(input)=>{this.textInput=input}} 
1

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