React のサブコンポーネントとは何ですか?

藏色散人
リリース: 2023-01-04 09:37:24
オリジナル
2669 人が閲覧しました

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート