Typescript引入ref的注意事项

Typescript引入ref的注意事项

//Jsx的类组件使用ref两种方式：

      //第一种
      {
        constructor() {//第一步注册
          super()
          this.ref = React.createRef()//用此方法来创建ref。将其赋值给一个变量，通过ref挂载在dom节点或组件上，用ref的current属性来获取节点或示例
        }
       componentDidMount() {
          this.ref.current.value = 'ref get input'//第三步首次使用
        }
        return <TargetComponent ref={this.ref} />//第二步绑定，//ref本身是一个对象， 
      }

       //第二种方法
        return(
          <Input
            ref={(input)=>this.inputRef=input}  //此时ref其实是一种回调函数，入参是dom节点或组件实例，使用this.inputRef即可获取节点
          />
        )
     //tsx中使用，tsx中方规范较多，具体使用如下
      //如果正在使用16.3+，则使用如下
      class TestApp extends React.Component<AppProps, AppState> {
        private stepInput: React.RefObject<HTMLInputElement>;
        constructor(props) {
            super(props);
            this.stepInput = React.createRef();
        }
        render() {
            return <input type="text" ref={this.stepInput} />;
        }
      }	

		//如果使用的更早的版本（<16.3）,则需使用callback-ref
			class TestApp extends React.Component<AppProps, AppState> {
          private stepInput: HTMLInputElement;//此句话也要存在
          constructor(props) {
              super(props);
              this.stepInput = null;
              this.setStepInputRef = element => {//使用element回调来绑定ref
                  this.stepInput = element;
              };
          }
          render() {
              return <input type="text" ref={this.setStepInputRef} />
          }
      }

参考文档：

https://stackoverflow.com/questions/33796267/how-to-use-refs-in-react-with-typescript