React中如何获取DOM元素

import React from 'react'

class Demo extends React.Component{
	box3 = React.createRef(); // this.box3=xxx
	
	render() {
		return <div>
			<h2 className="title" ref="titleBox">江户川柯南</h2>
			<h2 className="title" ref={x => this.box2 = x}>工藤新一</h2>
			<h2 className="title" ref={this.box3}>炭治郎</h2>
		</div>
	}
	componentDidMount(){
		// 第一次渲染完毕，virtualDOM已经变为真实DOM，此时我们可以获取需要操作的DOM元素
		console.log(this.refs.titleBox);
		console.log(this.box2);
		console.log(this.box3);
	}
}

export default Demo;

受控组件：基于修改数据/状态，让视图更新，来达到需要的效果 （推荐）
非受控组件：基于ref获取DOM元素，我们操作DOM元素，来实现需求和效果 （偶尔）
基于ref获取DOM元素的语法
1. 给需要获取的元素设置ref=‘xxx’,后期基于this.refs.xxx去获取相应的DOM元素(不推荐使用)
<h2 className="title" ref="titleBox">温馨提示</h2>
获取： this.refs.titleBox
2. 把ref属性值设置为一个函数
ref={x => this.xxx = x}

• x是函数的形参：存储的就是当前DOM元素
• 然后我们获取的DOM元素“x”直接挂载到实例的某个属性上（例如：box2）
  获取：this.xxx

3.基于 React.createRef() 方法创建一个ref对象 -> this.xxx = {current: null}
this.xxx = React.createRef(); // => this.xxx={current: null}
ref = {REF对象}
获取：this.

原理：在render渲染的时候，会获取virtualDOM的ref属性

• 如果属性是一个字符串，则会给this.refs增加这样的一个成员，成员值就是当前的DOM元素
• 如果属性值是一个函数，则会把函数执行，把当前DOM元素传递给这个函数（x->DOM元素），而在函数执行的内部，我们一般都会把DOM元素直接挂载到实例的某个属性上
• 如果属性值是一个REF对象，则会把DOM元素赋值给对象的current属性

import React from 'react'

class Child1 extends React.Component{
	state = {
		x: 100,
		y: 200
	}
	render() {
		return <div>
			子组件1
			<em ref={x => this.emBox = x}>100</em>
		</div>
	}
}

class Child2 = React.forwardRef(function Child2(props, ref) {
	// console.log(ref); //我们调用Child2的时候，设置的ref属性值（函数）
	// -> x => this.child2 = x
	render() {
		return <div>
			子组件2
			<button ref={ref}>按钮</button>
		</div>;
	}
});

class Demo extends React.Component{
	render() {
		return <div>
			<Child1 ref={x => this.child1 = x} />
			<Child2 ref={x => this.child2 = x} />
		</div>
	}
	componentDidMount(){
		// 第一次渲染完毕，virtualDOM已经变为真实DOM，此时我们可以获取需要操作的DOM元素
		// console.log(this.Child1); //存储的是子组件的实例对象
		console.log(this.Child2); // <button> 按钮 </button> (拿到了内部元素),button被转发了
	}
}

export default Demo;

给元素标签设置ref

目的：获取对应的DOM元素

给类组件设置ref

目的：获取当前调用类组件创建的实例（后续可以根据实例获取子组件中的相关信息）

给函数组件设置ref

直接报错: Function components cannot be given refs. Attempts to acess this ref will fail.
但是我们可以让其配合 React.forwardRef 实现ref的转发
目的：获取函数组件内部的某个元素