React函数式Hooks-useRef()用法

最新推荐文章于 2025-06-09 10:23:52 发布

前端-小鑫

最新推荐文章于 2025-06-09 10:23:52 发布

阅读量596

点赞数

CC 4.0 BY-SA版权

分类专栏： react 文章标签： reactjs react.js

本文链接：https://blog.youkuaiyun.com/weixin_43876728/article/details/119252525

react 专栏收录该内容

17 篇文章

订阅专栏

本文探讨了在React中，如何使用函数式组件结合useRef来获取DOM元素，并展示了如何通过ref实现子组件与父组件间的交互，包括计数器组件实例和子组件执行操作的示例。

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

函数式组件本身就没有实例，所以没有dom等于无法通过ref获取，而useRef则可以提供获取函数式组件的dom

用途：

获取dom
获取共享数据

父组件获取子组件的dom

import React, { useState, useCallback, useRef, PureComponent } from 'react'
class Counter extends PureComponent {
    render() {
        const { props } = this;
        return (
            <button onClick={props.onClick}>{props.count}执行</button>
        )
    }
}
function UseRefTemplate() {
    const [count, setCount] = useState(0)
    const countref = useRef()
    let timer
    const onClickFuntion = useCallback(() => {
        console.log(countref.current) //获取dom
    }, [count]);
    return (
        <div>
            <Counter ref={countref} count={count} onClick={onClickFuntion} />
        </div>
    )
}
export default UseRefTemplate

父组件执行子组件的方法

import React, { Component, useState, useMemo, memo, useCallback, useRef, PureComponent, useEffect } from 'react'
class Counter extends PureComponent {
    run() {
        console.log('执行')
    }
    render() {
        const { props } = this;
        return (
            <button onClick={props.onClick}>{props.count}执行</button>
        )
    }
}
function UseRefTemplat2() {
    const [count, setCount] = useState(0)
    const countref = useRef()
    let timer
    const onClickFuntion = useCallback(() => {
        console.log(countref.current) //获取dom
        countref.current.run()//执行子组件
    }, [count]);
    return (
        <div>
            <Counter ref={countref} count={count} onClick={onClickFuntion} />
        </div>
    )
}
export default UseRefTemplat2