ホームページ >ウェブフロントエンド >フロントエンドQ&A >React の親子コンポーネントとは何ですか

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

青灯夜游オリジナル: 2022-07-13 18:51:411992ブラウズ

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

#このチュートリアルの動作環境: 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 'react';

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 'react';
import Children from './Children';

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

    }

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

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

export default Up;

import React from 'react';

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

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

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

export default Children;

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

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

import React from 'react'; import Children from './Children'; 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 'react'; class Children extends React.Component{ constructor(props){ super(props); this.state = { } } run = () => { console.log(this.props.msg); } render(){ return ( <div> Children <br> <button>Run</button> </div> ) } } export default Children;

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

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

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

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

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

    }

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

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

export default Up;

import React from 'react';

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

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

export default Children;

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

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

import React from 'react'; import Children from './Children'; class Up extends React.Component {     constructor(props){         super(props);         this.state = {                      }     }     clickButton = () => {         console.log(this.refs.children);     }          render(){         console.log("render");         return(
                up                 <children></children>
        )     } } export default Up; ``` ```js import React from 'react'; class Children extends React.Component{     constructor(props){         super(props);         this.state = {             title: "子组件"         }     }     runChildren = () => {              }          render(){         return (
                Children

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

html 值传递 redis

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：反応条件付きレンダリングとは何ですか次の記事：反応条件付きレンダリングとは何ですか

続きを見る

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

1. React のコンポーネント

2. 親子コンポーネント

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

3.1 値を渡す

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

関連記事

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