반응의 하위 구성 요소는 무엇입니까?

반응에서는 특정 코드 조각이 구성 요소로 캡슐화되고 이 구성 요소가 다른 구성 요소에 도입됩니다. 그런 다음 캡슐화된 구성 요소를 소개하는 파일을 상위 구성 요소라고 하며, 도입된 구성 요소를 하위 구성 요소라고 합니다.

이 기사의 운영 환경: windows10 시스템, React16, thinkpad t480 컴퓨터.

추천: "react 비디오 튜토리얼"

때때로 우리는 무엇이 상위 컴포넌트이고 무엇이 하위 컴포넌트인지 구분할 수 없는 경우가 있습니다. 이제 간단히 이야기해 보겠습니다. 특정 코드 조각을 구성 요소로 캡슐화하고 이 구성 요소는 다른 구성 요소에 도입됩니다. 캡슐화된 구성 요소를 소개하는 파일을 상위 구성 요소라고 하며 가져온 구성 요소를 하위 구성 요소라고 합니다.

반응에서 하위 구성 요소의 메서드를 직접 호출합니다(props 메서드 아님)

우리 모두는 반응에서 상위 구성 요소에서 하위 구성 요소의 메서드를 호출하려면 일반적으로 상위 구성 요소에서 메서드를 정의한다는 것을 알고 있습니다. 컴포넌트를 props로 하위 컴포넌트로 전송한 다음 메서드를 실행하여 우리의 목적을 달성하기 위해 하위 컴포넌트에서 반환된 매개 변수를 가져옵니다.

분명히 이 실행은 적극적으로 실행되어야 합니다.

메서드를 하위 구성 요소에 정의하고 상위 구성 요소에서 직접 호출할 수 있는 방법이 있나요?

답은 그렇습니다.

업코드

import React, {Component} from "react";
import { Button } from "antd";
//父组件
export default class Parent extends Component {
    render() {
        return(
            <div>
　　　　　　　　　 <p>这是父组件</p>
                <Child triggerRef={this.bindRef} />
                <Button type="primary" onClick={this.btnClick} >click</Button>
            </div>
        )
    }
    bindRef = ref => { this.child = ref }
    btnClick = () => {
        this.child.getValuefromChild()
    }
}
//子组件
class Child extends Component {
    componentDidMount(){
        this.props.triggerRef(this)
    }
　　//这是子组件的方法
    getValuefromChild = () => console.log("this is child value.")
    render() {
        return <div>这是子组件</div>
    }
}

위 내용은 반응의 하위 구성 요소는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!