标签:支持 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}了
标签:支持 rop ons span reac creat create rpe xtend
原文地址:https://www.cnblogs.com/amiezhang/p/13174745.html