论 react 18中的ref 如何取得渲染后的实际元素、类、方法

周大胖子 · 发表于 2022-5-5 15:38:10

import React from "react";
const TF = React.forwardRef(function(props,myTfRef){
return (
<section>
<p ref={myTfRef} > 6666 </p>
这是测试用函数组件
</section>
)
})
class NewRef extends React.PureComponent{
constructor(){
super();
// this.OpRef = React.createRef(); 这是第三种写法
this.OpRef = null;
this.myTfRef = React.createRef(); // 测试获取函数中的ref [使用场景较少]
}
render(){
return (
<section>
{/* <p id={'p1'} >这是主体</p> */}
{/* <p ref={'pp'} >这是主体</p> */}
{/* <p ref={this.OpRef} >这是主体</p> */}
<p ref={(arg)=>{ this.OpRef = arg }} >这是主体</p>
<button onClick={()=>{ this.btnFn() }} > 点击获取桌面元素 </button>
<TF ref={this.myTfRef} ></TF>
<button onClick={()=>{ this.btnFn2() }} > 点击获取函数组件中的REF </button>
</section>
)
}
btnFn(){
// let Op1 = document.getElementById('p1'); // 第一种通过传统的Id获取渲染后的页面元素【不推荐】
// let Op1 = this.refs.pp; // 第二种通过传统的ref 字符串模式获取渲染后的页面元素【实际上到了18的时候这个就直接报错了我根本没跑起来不过也不在意反正不推荐用了】
// let Op1 = this.OpRef.current; // 第三种，利用createRef() 创建对象，然后把这个对象传递给ref [注意这个对象会在 ref对象的current 中] 【推荐】
// let Op1 = this.OpRef; // 这是第四种，利用 ref传递回调函数，且ref函数会自动执行，且默认传递参数是ref所在元素本身；【推荐】
// ref获取如果是元素，那就会获取元素本身；
// ref获取如果是类组件，那就会获取到类；
// ref获取如果是函数组件那什么都拿不到除非使用 React.forwardRef()方法创建的组件
// Op1.innerHTML = '除四害';
// console.log(Op1)
}
btnFn2(){
console.log(this.myTfRef.current)
}
}
export default NewRef;

复制代码