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 中国語 Web サイトの他の関連記事を参照してください。