React使用ref方法與場景介紹

更新時間：2022年10月31日 10:08:37 作者：搞前端的小菜

這篇文章主要介紹了React使用ref方法與場景，React支持給任意組件添加特殊屬性。ref屬性接受一個回調函數(shù)，它在組件被加載或卸載時會立即執(zhí)行

摘要

不管在Vue中還是React，如果我們想使用一個元素的DOM，不需要通過JS中操縱DOM的方法，它們提供了一個專屬的API就是ref。

而Vue中的ref可能比較簡單，這一篇主要講一下如何在React中使用ref，以及使用ref的場景。

1.ref的掛載

在React中，ref可以掛載到html元素上，同時也可以掛載在React元素上，看下面的代碼：

import React, { Component } from 'react'
// import { findDOMNode } from 'react-dom'
import Child from './Child'
export default class Father extends Component {
  componentDidMount(){
    console.log(this.refs.refElement);
    console.log(this.refs.child);
  }
  render() {
    return (
      <div>
        <input ref={ 'refElement' }></input>
        <Child ref={ 'child' }/>
        <button onClick={this.fn}>123</button>
      </div>
    )
  }
}

控制臺的打印為：

可以看到，在React中，ref是可以掛載到HTML元素和React元素上的。

（1）掛載HTML元素，返回真實的DOM

（2）掛載React元素，返回render后的實例對象

同時React也提供了一個方法findDOMNode可以將React元素的ref返回變成真實的DOM元素。

	import { findDOMNode } from 'react-dom'
    console.log(findDOMNode(this.refs.child));

同時在上面的代碼我們也可以看出來，ref的掛載是在componentDidMount等生命周期之前執(zhí)行的。

2.使用ref的三種方式

（1）字符串的方式

import React, { Component } from 'react'
export default class Father extends Component {
  componentDidMount(){
    console.log(this.refs.refElement);
  }
  render() {
    return (
      <div>
        <input ref={ 'refElement' }></input>
        <button onClick={this.fn}>123</button>
      </div>
    )
  }
}

這種方式和Vue的ref比較相似，但是官方目前已經(jīng)不推薦使用該方式，后續(xù)可能還會廢棄。

（2）函數(shù)的方式

import React, { Component } from 'react'
export default class Father extends Component {
  componentDidMount(){
    console.log(this.refElement);
  }
  render() {
    return (
      <div>
        <input ref={ ref => this.refElement = ref }></input>
        <button onClick={this.fn}>123</button>
      </div>
    )
  }
}

（3）react.CreateRef的方式

import React, { Component } from 'react'
export default class Father extends Component {
  refElement = React.createRef();
  componentDidMount(){
    console.log(this.refElement.current);
  }
  render() {
    return (
      <div>
        <input ref={this.refElement}></input>
        <button onClick={this.fn}>123</button>
      </div>
    )
  }
}

記住這里面通過refElement中的current，獲取真實的DOM元素。

3.ref的使用場景

這里我們說一個比較常見的場景，就是點擊按鈕讓輸入框聚焦：

import React, { Component } from 'react'
export default class Father extends Component {
  refElement = React.createRef();
  componentDidMount(){
    console.log(this.refElement.current);
  }
  fn = ()=>{
    this.refElement.current.focus();
  }
  render() {
    return (
      <div>
        <input ref={this.refElement}></input>
        <button onClick={this.fn}>聚焦</button>
      </div>
    )
  }
}

通過獲取DOM后，調用DOM上的focus方法API，來讓input框進行聚焦。

同時ref也可以適用于一些DOM元素的動畫效果，例如移動，變大變小，都需要通過ref來控制DOM，進行操作。

到此這篇關于React使用ref方法與場景介紹的文章就介紹到這了,更多相關React ref內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: