Eine kurze Analyse der Verwendung von ref in TypeScript und React

Wie verwende ich ref in TypeScript und React? Der folgende Artikel führt Sie in die Verwendung von ref ein. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Empfohlenes Tutorial: „JavaScript-Video-Tutorial“

Übergeordnete Komponente

In der übergeordneten Komponente schreiben Sie Folgendes:

Untergeordnetes Element in der Klasse definieren, um den Umfang der untergeordneten Komponente zu speichern

public child: any;Copy to clipboardErrorCopied

Binden Sie den Umfang der Statorkomponente

public onRef(ref:any){
 this.child = ref
}Copy to clipboardErrorCopied

Bind ref

<ChildPage onRef={(el)=>this.onRef(el)} />Copy to clipboardErrorCopied

onRef an die Unterkomponente und binden Sie diese (Schritt 3, ohne die Pfeilfunktion zu verwenden)

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

Unterkomponente

In die Unterkomponente schreiben Sie wie folgt:

1. Bind onRef im Konstruktor dazu

this.props.onRef(this)Copy to clipboardErrorCopied

Nach Abschluss der oben genannten 4 Schritte kann die übergeordnete Komponente den Statuswert und die Methode in der untergeordneten Komponente nach Belieben aufrufen.

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>
        )
    }
}

Weitere Programmierkenntnisse finden Sie unter: Programmiervideo! !

Das obige ist der detaillierte Inhalt vonEine kurze Analyse der Verwendung von ref in TypeScript und React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!