react中什麼叫子元件

在react中，將某段程式碼封裝成一個元件，而這個元件又在另一個元件中引入，那麼引入該封裝的元件的檔案叫做父元件，被引入的元件就叫做子元件。

本文操作環境：windows10系統、react16、thinkpad t480電腦。

推薦：《react影片教學》

有時候我們常常分不清什麼是父元件，什麼又是子元件。現在來簡單說下：我們將某段程式碼封裝成一個元件，而這個元件又在另一個元件中引入，而引入該封裝的元件的檔案叫做父元件，被引入的元件叫做子元件。

react中直接呼叫子元件的方法（非props方式）

我們都知道在react中，若要在父元件呼叫子元件的方法，通常我們會採用在父元件定義一個方法，作為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>
    }
}

以上是react中什麼叫子元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！