react ref 使用

最新推荐文章于 2024-07-26 11:41:15 发布

莉莉happyDay

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量115

点赞数

分类专栏： react 文章标签： javascript react.js 前端

本文链接：https://blog.csdn.net/qq_35407448/article/details/125183495

版权

react 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

import React from 'react'
import Child from './child'

export default class UseRef extends React.Component {
	/**
	 * 第一种ref使用方式
	 */
	// componentDidMount() {
	// 	console.log(this.refs.div)
	// }

	// render() {
	// 	return (
	// 		<div ref="div">12121</div>
	// 	)
	// }

	/**
	 * 第二种ref使用方式
	 */
	// componentDidMount() {
	// 	console.log(this.div)
	// }
	// render() {
	// 	return (
	// 		<div ref={el=>this.div=el}>12121ddd</div>
	// 	)
	// }

	/**
	 * 第三种
	 * 1. 给子组件绑定一个实例
	 * 2. 函数式子组件中使用React.forwardRef(函数组件)来注册ref
	 * 3. 访问实例的属性
	 */
	// componentDidMount() {
	// 	console.log(this.child.value)
	// 	this.child.value = 'df'
	// }
	// render() {
	// 	return (
	// 		<Child ref={el=>this.child = el}/>
	// 	)
	// }

	/**
	 * 第四种 createRef
	 */
	constructor() {
		super()
		this.div = React.createRef()
	}

	 componentDidMount() {
		 this.div.current.style.background='red'
	 }

	 render() {
		 return (
			 <div ref={this.div}>12121</div>
		 )
	 }
}