获取DOM

获取DOM

1、获取DOM

javascript 复制代码
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、获取类组件实例

javascript 复制代码
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

javascript 复制代码
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
相关推荐
然我3 小时前
React 开发通关指南:用 HTML 的思维写 JS🚀🚀
前端·react.js·html
马特说6 小时前
React金融数据分析应用性能优化实战:借助AI辅助解决18万数据量栈溢出Bug
react.js·金融·数据分析
归于尽6 小时前
useEffect玩转React Hooks生命周期
前端·react.js
G等你下课6 小时前
React useEffect 详解与运用
前端·react.js
中微子7 小时前
React Props 传值规范详解
前端·react.js
卸任7 小时前
性能优化大作战:React.memo 在可编辑列表中的奇效
前端·javascript·react.js
LeeAt7 小时前
React Hooks 编程:useState和useEffect的详解
前端·react.js
Dream耀7 小时前
React Hooks 指南:useState 与 useEffect 的用法与技巧
前端·javascript·react.js
我想说一句7 小时前
React Hooks 生存指南:让你的函数组件"活"起来 🧬
前端·javascript·react.js
LeeAt7 小时前
AI单词拍照识别移动端项目(一)
前端·react.js·ai编程