Heim  >  Artikel  >  Web-Frontend  >  Was sind Eltern-Kind-Komponenten in React

Was sind Eltern-Kind-Komponenten in React

青灯夜游
青灯夜游Original
2022-07-13 18:51:411949Durchsuche

Bei den gegenseitigen Aufrufen zwischen Reaktionskomponenten wird der Anrufer als übergeordnete Komponente und der Angerufene als untergeordnete Komponente bezeichnet. Werte können zwischen übergeordneten und untergeordneten Komponenten übergeben werden: 1. Wenn eine übergeordnete Komponente einen Wert an eine untergeordnete Komponente übergibt, wird der zu übergebende Wert zuerst an die untergeordnete Komponente übergeben, und dann werden in der untergeordneten Komponente Requisiten verwendet Empfangen Sie den von der übergeordneten Komponente übergebenen Wert. 2. Untergeordnete Komponente Wenn Sie Werte an die übergeordnete Komponente übergeben, müssen Sie diese über die Trigger-Methode an die übergeordnete Komponente übergeben.

Was sind Eltern-Kind-Komponenten in React

Die Betriebsumgebung dieses Tutorials: Windows 7-System, React18-Version, Dell G3-Computer.

1. Komponenten in React

Die React-Komponente ist ein selbstdefiniertes Nicht-HTML-Tag. Es ist festgelegt, dass der erste Buchstabe großgeschrieben werden sollte: 首字母大写

class App extends Component{
}

<app></app>

Was sind Eltern-Kind-Komponenten in React

二、父子组件

组件的相互调用中,把调用者称为父组件,被调用者称为子组件:

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;

三、父组件给子组件传值

父组件向子组件传值使用props。父组件向子组件传值时,先将需要传递的值传递给子组件,然后在子组件中,使用props来接收父组件传递过来的值。

父组件在调用子组件的时候定义一个属性:

<children></children>

这个值msg会绑定在子组件的props

this.props.msg
Was sind Eltern-Kind-Komponenten in React

2. In der gegenseitigen Berufung Übergeordnete und untergeordnete Komponenten

Komponenten, setzen Sie Der Aufrufer wird als übergeordnete Komponente bezeichnet, und der Angerufene wird als untergeordnete Komponente bezeichnet:

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;
Was sind Eltern-Kind-Komponenten in React3 Die übergeordnete Komponente übergibt den Wert an die untergeordnete Komponente

Die übergeordnete Komponente übergibt den Wert an die untergeordnete Komponente. Werte verwenden Requisiten. Wenn eine übergeordnete Komponente einen Wert an eine untergeordnete Komponente übergibt, wird der zu übergebende Wert zuerst an die untergeordnete Komponente übergeben. Anschließend werden in der untergeordneten Komponente Requisiten verwendet, um den von der übergeordneten Komponente übergebenen Wert zu empfangen.

Die übergeordnete Komponente definiert beim Aufrufen der untergeordneten Komponente eine Eigenschaft: Was sind Eltern-Kind-Komponenten in React

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;
Dieser Wert msg wird an das Attribut props der untergeordneten Komponente und der untergeordneten Komponente gebunden kann direkt verwendet werden:

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;
Die übergeordnete Komponente kann Werte und Methoden an die Komponente übergeben und sich sogar selbst an die untergeordnete Komponente übergeben

3.1 Werte übergebenWas sind Eltern-Kind-Komponenten in React

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 '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;

3.2 Methoden übergeben

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;
Was sind Eltern-Kind-Komponenten in React

3.3 Die übergeordnete Komponente übergibt den Wert an die untergeordnete Komponente Komponente über die Trigger-Methode

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; ``` ![Was sind Eltern-Kind-Komponenten in 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)
rrreee

🎜5. Die übergeordnete Komponente. Erhalten Sie Attribute und Methoden der Unterkomponente über refs🎜🎜rrreee🎜[Verwandte Empfehlungen: 🎜Redis-Video-Tutorial🎜]🎜

Das obige ist der detaillierte Inhalt vonWas sind Eltern-Kind-Komponenten in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn