码迷,mamicode.com
首页 > 编程语言 > 详细

React 函数组件传递ref

时间:2020-06-22 02:03:20      阅读:257      评论:0      收藏:0      [点我收藏+]

标签:支持   rop   ons   span   reac   creat   create   rpe   xtend   

以前理所当然的认为,只要ref作为props传进去,就可以直接给某个子组件用了,但是实际上不是这样的

const Test = ({ref}) => {
    return <div ref={ref}>
        <p>hahahha</p>
    </div>
}

class TestWarper extends React.Component {
    ref = React.createRef();
    render() {
        return <Test ref={this.ref} />
    }
}
// 上面这种情况下,this.ref永远是{current: null},在Test子组件也发现,传进来的ref是undefined

面对这种情况,React有个方法,可以支持Ref的传递:forwardRef

import React, {forwardRef} from ‘react‘;

// 包一层forwardRef
const Test = forwardRef((props, ref:any) => {
    return <div ref={ref}>
        <p>hahahha</p>
    </div>
})

class TestWarper extends React.Component {
    ref = React.createRef();
    render() {
        return <Test ref={this.ref} />
    }
}
// 这种情况下,this.ref就会是{current: div}了

 

React 函数组件传递ref

标签:支持   rop   ons   span   reac   creat   create   rpe   xtend   

原文地址:https://www.cnblogs.com/amiezhang/p/13174745.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!