获取DOM

获取DOM

1、获取DOM

import React, { PureComponent, createRef } from 'react'

export class App extends PureComponent {
	constructor() {
		super()
		
		this.titleRef = createRef()
		
		this.titleEL = null
	}

	getNativeDOM() {
		`方式1、在React元素上绑定一个ref字符串`
		console.log('ref=', this.refs.why)
		
		`方式2、使用 createRef 提前创建一个ref对象，并将其绑定到DOM元素上`
		console.log('ref=', this.titleRef.current);
		
		`方式3、在DOM上传入一个箭头函数，此DOM被渲染时，回调函数被执行，就获取到DOM了`
		console.log('this.titleEL=', this.titleEL);
	}

	render() {
		return (
			<div>
				<h2 ref="why">Hello World</h2>
				
				<h2 ref={this.titleRef}>方式2 - 你好啊</h2>
				
				<h2 ref={el => this.titleEL = el}>方式3 - 你好啊</h2>
				
				<button onClick={e => this.getNativeDOM()}>获取原生DOM</button>
			</div>
		)
	} // end-render
}

export default App

2、获取类组件实例

import React, { PureComponent, createRef } from 'react'

`HelloWorld 组件`
class HelloWorld extends PureComponent {
	constructor() {
		super()
	}

	test() {
		console.log('我是 HelloWorld 组件中的 test方法')
	}

	render() {
		return <div>hello World</div>
	}
}


`App 组件`
export class App extends PureComponent {
	constructor() {
		super()
		
		this.hwRef = createRef()
	}

	getComponent() {
		`获取 子组件 HelloWorld 的实例`
		console.log('ref=', this.hwRef.current)
		`在这里可以调用 子组件中的方法`
		this.hwRef.current.test()
	}

	render() {
		return (
			<div>
				<HelloWorld ref={this.hwRef}></HelloWorld>
				
				<button onClick={e => this.getComponent()}>获取组件实例</button>
			</div>
		)
	}
}

export default App

3、获取函数式组件的DOM

import React, { PureComponent, createRef, forwardRef } from 'react'

` 获取，函数式组件中的某个DOM，使用 forwardRef(props, ref) 高阶函数
  forwardRef：用于，将 ref 从父组件，透传到子组件内部的DOM元素。`
const HelloWorld = forwardRef((props, ref) => {
	return (
		<div>
			<h1 ref={ref}>函数式组件, 获取DOM</h1>
			<p>函数式组件 hello World</p>
		</div>
	)
})

export class App extends PureComponent {
	constructor() {
		super()
		this.hwRef = createRef()
	}

	getComponent() {
		console.log('ref=', this.hwRef.current)
	}

	render() {
		return (
			<div>
				<HelloWorld ref={this.hwRef}></HelloWorld>
				<button onClick={e => this.getComponent()}>获取组件实例</button>
			</div>
		)
	} // end-render
}

export default App