React操作dom之refs(三种方式进行详解)

在react里面，一些情况我们不得不操作dom，可以利用refs，目前来说有三种方式，下面一种一种进行介绍

方式一:传入字符串 使用时通过this.refs.传入的字符串格式获取对应的元素;

export default class App extends PureComponent { render() { return ( <div> <h2 ref="titleRef">Hello React</h2> <button onClick={e=>this.changeValue()}>改变文本</button> </div> ) } changeValue(){ this.refs.titleRef.innerHTML ='方式一' } }

方式二:传入一个对象(react推荐的方式) 对象通过React.createRef()方式创建出来的 使用时获取到创建的对象其中有一个current属性就是对应的元素

import React, { PureComponent,createRef } from 'react' 先导入createRef export default class App extends PureComponent { constructor(props){ super(props); this.titleRef =createRef() } render() { return ( <div> <h2 ref={this.titleRef}>Hello React</h2> <button onClick={e=>this.changeValue()}>改变文本</button> </div> ) } changeValue(){ this.titleRef.current.innerHTML = '方式二' } }

方式三:传入一个函数 该函数会在DOM被挂载时进行回调,这个函数会传入一个元素对象,我们可以自己保存 使用时,直接拿到之前保存的元素对象即可

export default class App extends PureComponent { constructor(props){ super(props); this.titleEl = null } render() { return ( <div> <h2 ref={(args)=>this.titleEl =args}>Hello React</h2> <button onClick={e=>this.changeValue()}>改变文本</button> </div> ) } changeValue(){ this.titleEl.innerHTML ='方式三' } }

再来说下ref的类型

ref的值根据节点的类型而有所不同，当ref属性用于HTML元素时，构造函数中使用React.createRef()创建的ref接收底层DOM元素作为其current属性

但是当ref属性用于自定义class组件时

ref对象接收组件的挂载实例作为其current属性

下面来具体演示一下，当ref属性用于自定义class组件

定义一个类组件，当点击button时候，数字的数量+1

class Counter extends PureComponent{ constructor(props){ super(props); this.state ={ counter:0 } } render(){ return ( <div> <h2>{this.state.counter}</h2> <button onClick={e=>this.addNmber()}>数量+1</button> </div> ) } addNmber(){ this.setState({ counter:this.state.counter+1 }) } }

将它放入App组件中，现在需求是点击App组件里面的事件，让Counter组件里面数字的数量也能+1

export default class App extends PureComponent { constructor(props){ super(props); this.createNumber =createRef() } render() { return ( <div> <Counter ref={this.createNumber}/> <button onClick={e=>this.changeValue()}>改变数量+1</button> </div> ) } changeValue(){ this.createNumber.current.addNmber() } }

注意！你不能在函数组件上使用ref属性,因为他们没有实例