TypeScript与React中如何使用ref

向右看齐 2023-01-03 01:40 200阅读 0赞

## 父组件 ##

**在父组件中，编写如下：**

1.  类中定义child,用于存放子组件的作用域
    
        public child: any;Copy to clipboardErrorCopied
2.  绑定子组件作用域
    
        public onRef(ref:any){
         this.child = ref
        }Copy to clipboardErrorCopied
3.  子组件上绑定ref
    
        <ChildPage onRef={(el)=>this.onRef(el)} />Copy to clipboardErrorCopied
4.  onRef 绑定this(第3步，不使用箭头函数的情况)

this.onRef = this.onRef.bind(this)Copy to clipboardErrorCopied

## 子组件 ##

**在子组件中，编写如下：**

1.  constructor中onRef绑定this
    
        this.props.onRef(this)Copy to clipboardErrorCopied

完成以上4步骤，父组件中可以随便调用子组件中state的值以及方法。

export class ParentCom extends React.Component<{
        }, {
        }> {
        
        constructor(props:{
        }){
        
            super(props);
            this.onRef = this.onRef.bind(this);
        }
        public child: any;
    
        onRef(ref:any){
        
            this.child = ref;
        }
    
        getChildFun(){
        
            this.child.testFun();
        }
    
        render(){
        
            return (
               <div>
                   <span>父组件</span>
                   <ChildCom onRef={
        this.onRef}></ChildCom>
               </div>
            )
        }
    }
    interface childProps{
        
        onRef? : any
    }
    export class ChildCom extends React.Component<childProps, {
        }> {
        
        constructor(props:{
        }){
        
            super(props);
            this.props.onRef(this);
        }
    
    
        testFun(){
        
            console.log(123)
        }
    
        render(){
        
            return (
               <div>
                   <span>子组件</span>
               </div>
            )
        }
    }