react函数式组件+ts+ref

Copper peas

已于 2022-10-19 17:40:01 修改

阅读量725

点赞数

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

于 2022-10-19 17:28:11 首次发布

本文链接：https://blog.youkuaiyun.com/Yi_Li_Tong_Wan_DOU/article/details/127412350

版权

react 同时被 2 个专栏收录

3 篇文章

订阅专栏

1 篇文章

订阅专栏

本文介绍如何在React中使用ref来操作DOM元素，通过实例展示了创建ref、访问ref以及在componentDidMount中的应用。重点在于讲解ref在前端开发中的实际应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import React from 'react'

class App extends React.Component {
  private readonly myRef: React.RefObject<HTMLDivElement>
  constructor (props: any) {
    super(props)
    this.myRef = React.createRef() // 1.创建一个ref的引用，并且可以通过this.myRef属性去进行访问
    this.state = {

    }
  }

  componentDidMount () {
    // 可以通过this.getRef.current  属性名来进行获取
    console.log(this)
  }

  render () {
    return (
      <div ref={this.myRef}>
        <h1>234234324</h1>
      </div>
    )
  }
}

export default App