获取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
相关推荐
NicolasCage15 分钟前
Icon图标库推荐
vue.js·react.js·icon
Lazy_zheng3 小时前
React架构深度解析:从 Stack 到 Fiber,解决 CPU 和 I/O 瓶颈问题
前端·react.js·前端框架
WildBlue3 小时前
React 遇上原子 CSS:前端开发的超级进化 🚀
前端·react.js
namehu3 小时前
“c is not a function” - 一次由 useEffect 异步函数引发的 React 底层崩溃分析
前端·javascript·react.js
iaku3 小时前
🔥React工程化实践:构建企业级可维护应用架构
前端·react.js·前端框架
晓得迷路了5 小时前
栗子前端技术周刊第 91 期 - 新版 React Compiler 文档、2025 HTML 状态调查、Bun v1.2.19...
前端·javascript·react.js
今禾19 小时前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite
我想说一句19 小时前
掘金移动端React开发实践:从布局到样式优化的完整指南
前端·react.js·前端框架
码间舞19 小时前
Zustand 与 useSyncExternalStore:现代 React 状态管理的极简之道
前端·react.js
爱编程的喵1 天前
深入理解JSX:从语法糖到React的魔法转换
前端·react.js