初识React(4)：ref属性

2023年2月7日 227次阅读 来源: hope93

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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞