Apakah tindak balas komponen ibu bapa-anak-Soal Jawab bahagian hadapan-php.cn

Apakah tindak balas komponen ibu bapa-anak

青灯夜游

Lepaskan： 2022-07-13 19:02:04

asal

1961 orang telah melayarinya

Dalam panggilan bersama antara komponen tindak balas, pemanggil dipanggil komponen induk dan penerima dipanggil komponen anak. Nilai boleh dihantar antara komponen induk dan anak: 1. Apabila komponen induk menghantar nilai kepada komponen anak, nilai yang akan dihantar terlebih dahulu dihantar ke komponen anak, dan kemudian dalam komponen anak, props digunakan untuk menerima nilai yang diluluskan oleh komponen induk; 2. Komponen anak Apabila menghantar nilai kepada komponen induk, anda perlu menghantarnya kepada komponen induk melalui kaedah pencetus.

Apakah tindak balas komponen ibu bapa-anak

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi react18, komputer Dell G3.

1. Komponen dalam React

Komponen tindak balas ialah teg bukan html yang ditentukan sendiri, yang menetapkan bahawa komponen tindak balas 首字母大写:

class App extends Component{
}

<app></app>

Salin selepas log masuk

Apakah tindak balas komponen ibu bapa-anak

2. Komponen ibu bapa-anak

komponen memanggil satu sama lain, 调用者 dipanggil komponen induk, dan 被调用者 dipanggil komponen anak:

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;

Salin selepas log masuk

import React from 'react';

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

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

export default Children;

Salin selepas log masuk

3. Komponen induk menghantar nilai kepada komponen anak

Komponen induk menghantar nilai kepada komponen anak menggunakan prop. Apabila komponen induk menghantar nilai kepada komponen anak, nilai yang akan dihantar terlebih dahulu dihantar ke komponen anak, dan kemudian dalam komponen anak, prop digunakan untuk menerima nilai yang diluluskan oleh komponen induk.

Komponen induk mentakrifkan sifat apabila memanggil komponen anak:

<children></children>

Salin selepas log masuk

Nilai ini msg akan terikat pada sifat props komponen anak dan komponen anak boleh digunakan secara langsung :

this.props.msg

Salin selepas log masuk

Komponen induk boleh menghantar nilai dan kaedah kepada komponen, malah boleh menghantar sendiri kepada komponen anak

3.1 Melepasi nilai

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;

Salin selepas log masuk

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;

Salin selepas log masuk

Apakah tindak balas komponen ibu bapa-anak

3.2 Kaedah penghantaran

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;

Salin selepas log masuk

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;

Salin selepas log masuk

Apakah tindak balas komponen ibu bapa-anak

3.3 Adakah komponen Induk akan berpindah kepada komponen anak

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;

Salin selepas log masuk

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;

Salin selepas log masuk

Apakah tindak balas komponen ibu bapa-anak

4. Komponen anak melepasi nilai kepada komponen induk

Komponen anak menghantar nilai kepada komponen induk dengan mencetuskan kaedah

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;

Salin selepas log masuk

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;

Salin selepas log masuk

Apakah tindak balas komponen ibu bapa-anak

5 . Dapatkan atribut dan sifat komponen anak melalui rujukan dalam Kaedah komponen induk

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;
```
![Apakah tindak balas komponen ibu bapa-anak](https://img-blog.csdnimg.cn/20200722065137748.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xldGlhbnhm,size_16,color_FFFFFF,t_70)

Salin selepas log masuk

[Cadangan berkaitan: Tutorial video Redis]

Atas ialah kandungan terperinci Apakah tindak balas komponen ibu bapa-anak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!