论坛网站开发,中国世界排名变化,第四性 wordpress,wordpress文章对游客不显示在前面学习ref时讲过#xff0c;ref不能应用于函数式组件#xff1a; 因为函数式组件没有实例#xff0c;所以不能获取到对应的组件对象
但是#xff0c;在开发中我们可能想要获取函数式组件中某个元素的DOM#xff0c;这个时候我们应该如何操作呢#xff1f;
方式一ref不能应用于函数式组件 因为函数式组件没有实例所以不能获取到对应的组件对象
但是在开发中我们可能想要获取函数式组件中某个元素的DOM这个时候我们应该如何操作呢
方式一直接传入ref属性错误的做法方式二通过forwardRef高阶函数
import React, {PureComponent, createRef, forwardRef} from react;
class Home extends PureComponent{render() {return h2Home/h2}
}
/*function Profile(props) {return h2Profile/h2
}*/
const Profile forwardRef(function Profile(props, ref) {return h2 ref{ref}Profile/h2
})
class App extends PureComponent {constructor(props) {super(props);this.titleRef createRef()this.homeRef createRef()this.profileRef createRef()}render() {return (divh2 ref{this.titleRef}hello/h2Home ref{this.homeRef} /Profile ref{this.profileRef} /button onClick{e this.printRef()}打印ref/button/div);}printRef () {console.log(this.titleRef.current)console.log(this.homeRef.current)console.log(this.profileRef.current)}
}
export default App;
