TypeScript 및 React에서 ref를 사용하는 방법에 대한 간략한 분석

TypeScript와 React에서 ref를 어떻게 사용하나요? 다음 기사에서는 ref의 사용법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

추천 튜토리얼: "JavaScript Video Tutorial"

부모 컴포넌트

부모 컴포넌트에서 다음과 같이 작성하세요.

클래스에 자식을 정의하여 자식 컴포넌트의 범위를 저장하세요

public child: any;Copy to clipboardErrorCopied

Stator 컴포넌트 범위를 바인딩

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

하위 컴포넌트에 ref

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

onRef를 바인딩하고 이를 바인딩합니다(3단계, 화살표 기능을 사용하지 않음)

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

SubcomComponent

하위 컴포넌트에는 다음과 같이 작성합니다.

1. onRef 생성자에서 this

this.props.onRef(this)Copy to clipboardErrorCopied

위의 4단계를 완료한 후 상위 구성 요소는 하위 구성 요소의 상태 값과 메서드를 마음대로 호출할 수 있습니다.

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

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 TypeScript 및 React에서 ref를 사용하는 방법에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!