初识React(4):ref属性

ref属性其实就是为了获取DOM节点,例如:

import React from 'react'

class RefComponent extends React.Component {
  componentDidMount(){
     this.inputNode.focus();
  }
   render() {
     return (
       <div>
          <h1>ref属性</h1>
          <input type="text" ref={node => this.inputNode = node}/>
       </div>
     )
   }
}

export default RefComponent;

利用ref属性返回的回调函数获取DOM节点,从而让页面渲染完成之后,input聚焦,ref除了可以绑定回调函数之外还能绑定字符串,但是在后期react对字符串形式不再维护,这里就不具体说明了,就用回调函数获取DOM。

除了给input聚焦之外,还可以获取当前DOM节点的内容,如下:

import React from 'react'

class RefComponent extends React.Component {
  componentDidMount(){
     this.inputNode.focus();
     console.log(this.texthtml);
     console.log(this.texthtml.innerHTML);
  }
   render() {
     return (
       <div>
          <h1>ref属性</h1>
          <input type="text" ref={node => this.inputNode = node}/>
          <div ref={node => this.texthtml = node}>你好</div>
       </div>
     )
   }
}

export default RefComponent;

输出结果为:

<div>你好</div>
你好

在这里,我们也发现一个问题,ref虽然获取DOM节点很方便,但是如果ref用的多了,后期就不好维护了,所以,尽量能少用即少用。

ref除了可以给HTML标签添加,也可以给组件添加,例如:

import React from 'react'
import Button from './button.js'

class RefComponent extends React.Component {
  componentDidMount(){
     this.inputNode.focus();
     console.log(this.texthtml);
     console.log(this.texthtml.innerHTML);
     console.log(this.buttonNode);
  }
   render() {
     return (
       <div>
          <h1>ref属性</h1>
          <input type="text" ref={node => this.inputNode = node}/>
          <div ref={node => this.texthtml = node}>你好</div>
          <Button ref={button => this.buttonNode = button}/>
       </div>
     )
   }
}

export default RefComponent;

但是此时,this.buttonNode得到的是一个Button这个组件实例DOM

这里要注意一个问题,ref只能用在类定义的组件,不能用在函数组件,因为函数组件没有实例,比如以下写法就是错误的:

import React from 'react'

function TestComponent() {
   return (
    <div>函数组件</div>
   );
}

class RefComponent extends React.Component {
  componentDidMount(){
     console.log(this.testCom);
  }
   render() {
     return (
       <div>
          <h2>函数组件</h2>
          <TestComponent ref={node => this.testCom = node}/>
       </div>
     )
   }
}

export default RefComponent;

如果这样写,则会报错,并且this.testCom为undefined,因为此时是获取不到函数组件的实例的,所以以上写法要注意

总结: ref可以给HTML标签,类组件添加,但是不能给函数组件添加

    原文作者:hope93
    原文地址: https://segmentfault.com/a/1190000016137620
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞