コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > フロントエンドQ&A > 本文

React の親子コンポーネントとは何ですか

青灯夜游
リリース： 2022-07-13 19:02:04
オリジナル
1953 人が閲覧しました

react コンポーネントの相互呼び出しでは、呼び出し元を親コンポーネント、呼び出し先を子コンポーネントと呼びます。親コンポーネントと子コンポーネント間で値を渡すことができます。 1. 親コンポーネントが子コンポーネントに値を渡すとき、渡される値はまず子コンポーネントに渡され、次に子コンポーネント内で props が使用されます。親コンポーネントから渡された値を受け取る; 2.子コンポーネント 親コンポーネントに値を渡す場合は、トリガーメソッドを通じて親コンポーネントに値を渡す必要があります。

React の親子コンポーネントとは何ですか

#このチュートリアルの動作環境: Windows7 システム、react18 バージョン、Dell G3 コンピューター。

1. React のコンポーネント

react コンポーネントは独自定義の非 HTML タグであり、react コンポーネント の最初の文字を大文字にすることが規定されています : 

class App extends Component{
}

<app></app>
ログイン後にコピー

React の親子コンポーネントとは何ですか

2. 親子コンポーネント

コンポーネントの相互呼び出しでは、caller が使用されます。親コンポーネントと callee サブコンポーネントを呼び出します: 

import React from 'react';
import Children from './Children';

class Up extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            
        }

    }

    

    render(){
        console.log("render");
        return(
            <div>
                up
                <children></children>
            </div>
        )
    }
}

export default Up;
ログイン後にコピー
import React from 'react';

class Children extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            
        }
    }
    
    render(){

        return (
            <div>
                Children
            </div>
        )
    }
}

export default Children;
ログイン後にコピー

3. 親コンポーネントは値をサブコンポーネントに渡します

親コンポーネントは値をサブコンポーネントに渡します小道具を使用するサブコンポーネント。親コンポーネントが子コンポーネントに値を渡す場合、まず渡される値が子コンポーネントに渡され、次に子コンポーネントでは props を使用して親コンポーネントから渡された値を受け取ります。

親コンポーネントは、子コンポーネントを呼び出すときにプロパティを定義します: 

<children></children>
ログイン後にコピー

この値 msg は、子の props プロパティにバインドされます。コンポーネント、サブコンポーネントは直接使用できます: 

this.props.msg
ログイン後にコピー

親コンポーネントは値とメソッドをコンポーネントに渡すことができ、さらにそれ自体をサブコンポーネントに渡すこともできます

3.1 値を渡す

import React from &#39;react&#39;;
import Children from &#39;./Children&#39;;

class Up extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            
        }

    }

    

    render(){
        console.log("render");
        return(
            <div>
                up
                <Children msg="父组件传值给子组件" />
            </div>
        )
    }
}

export default Up;
ログイン後にコピー
import React from &#39;react&#39;;

class Children extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            
        }
    }
    
    render(){

        return (
            <div>
                Children
                <br />
                {this.props.msg}
            </div>
        )
    }
}

export default Children;
ログイン後にコピー

React の親子コンポーネントとは何ですか

#3.2 メソッドを渡す
import React from &#39;react&#39;;
import Children from &#39;./Children&#39;;

class Up extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            
        }

    }

    run = () => {
        console.log("父组件run方法");
    }
    

    render(){
        console.log("render");
        return(
            <div>
                up
                <Children run={this.run} />
            </div>
        )
    }
}

export default Up;
ログイン後にコピー
import React from &#39;react&#39;;

class Children extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            
        }
    }

    run = () => {
        this.props.run();
    }
    
    render(){

        return (
            <div>
                Children
                <br />
                <button onClick={this.run}>Run</button>
            </div>
        )
    }
}

export default Children;
ログイン後にコピー

React の親子コンポーネントとは何ですか

##3.3 親コンポーネントをに渡す子コンポーネント 

import React from &#39;react&#39;;
import Children from &#39;./Children&#39;;

class Up extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            
        }

    }

    run = () => {
        console.log("父组件run方法");
    }
    

    render(){
        console.log("render");
        return(
            <div>
                up
                <Children msg={this}/>
            </div>
        )
    }
}

export default Up;
ログイン後にコピー
import React from &#39;react&#39;;

class Children extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            
        }
    }

    run = () => {
        console.log(this.props.msg);
    }
    
    render(){

        return (
            <div>
                Children
                <br />
                <button onClick={this.run}>Run</button>
            </div>
        )
    }
}

export default Children;
ログイン後にコピー

React の親子コンポーネントとは何ですか

4. 子コンポーネントは、親コンポーネントに値を渡します。

子コンポーネントは、トリガー メソッドを介して親コンポーネントに値を渡す 値を渡すには

import React from &#39;react&#39;;
import Children from &#39;./Children&#39;;

class Up extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            
        }

    }

    getChildrenData = (data) => {
        console.log(data);
    }
    

    render(){
        console.log("render");
        return(
            <div>
                up
                <Children upFun={this.getChildrenData}/>
            </div>
        )
    }
}

export default Up;
ログイン後にコピー
import React from &#39;react&#39;;

class Children extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            
        }
    }
    
    render(){

        return (
            <div>
                Children
                <br />
                <button onClick={() => {this.props.upFun("子组件数据")}}>Run</button>
            </div>
        )
    }
}

export default Children;
ログイン後にコピー

React の親子コンポーネントとは何ですか

5. 親コンポーネントの参照を通じて子コンポーネントのプロパティとメソッドを取得する

import React from &#39;react&#39;;
import Children from &#39;./Children&#39;;

class Up extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            
        }

    }

    clickButton = () => {
        console.log(this.refs.children);
    }
    

    render(){
        console.log("render");
        return(
            <div>
                up
                <Children ref="children" msg="test"/>
                <button onClick={this.clickButton}>click</button>
            </div>
        )
    }
}

export default Up;
```
```js
import React from &#39;react&#39;;

class Children extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            title: "子组件"
        }
    }

    runChildren = () => {
        
    }
    
    render(){

        return (
            <div>
                Children
                <br />
            </div>
        )
    }
}

export default Children;
```
![React の親子コンポーネントとは何ですか](https://img-blog.csdnimg.cn/20200722065137748.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xldGlhbnhm,size_16,color_FFFFFF,t_70)
ログイン後にコピー
[関連する推奨事項:Redis ビデオ チュートリアル

]

以上がReact の親子コンポーネントとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
react 親子コンポーネント
ソース：php.cn
前の記事：反応条件付きレンダリングとは何ですか 次の記事：React の古いライフサイクルと新しいライフサイクルの違いは何ですか
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1361
Reactのsortメソッドでレンダリング(フィルターとページネーションを使用)をトリガーするにはどうすればよいですか? これが私の Sort.js スタイル コンポーネントです: <SortWrapper><SortText>SortBy</SortText>&l...
から 2024-04-06 21:28:37
0
1
2257
3 レベル階層のカスタム分類を使用して woocommerce 関連製品を選択します 「スポーツ」というカスタム分類を持つ woocommerce ストアがあります。分類には、親、子、子という 3 つのレベルがあります。たとえば、屋内スポーツ > アリーナ ス...
から 2024-04-06 20:05:30
0
1
544
livewire遅延プレースホルダーでlaravelコンポーネントを使用する方法 laravel コンポーネントのスケルトンを livewire3 プレースホルダー内に追加したい これまでに試したこと: Laravel コンポーネントを含めることによる Live...
から 2024-04-06 20:02:10
0
2
543
opentbs を使用して odt ファイルを生成するときに発生する問題: 同じキーの値が別の列ではなく同じ行に表示されます。 PHPでodtを作成するためにOpenTbsというライブラリを使っていますが、列と行が動的に生成されるので利用しています。行と列の作成方法は知っていますが、それらを整理する方法がわ...
から 2024-04-06 20:18:18
0
1
483
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート