Was sind Eltern-Kind-Komponenten in React-Front-End-Fragen und Antworten-php.cn

Was sind Eltern-Kind-Komponenten in React

青灯夜游

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

Original

1961 Leute haben es durchsucht

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>

Nach dem Login kopieren

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;

Nach dem Login kopieren

import React from 'react';

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

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

export default Children;

Nach dem Login kopieren

三、父组件给子组件传值

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

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

<children></children>

Nach dem Login kopieren

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

this.props.msg

Nach dem Login kopieren

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;

Nach dem Login kopieren

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;

Nach dem Login kopieren

3 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 &#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;

Nach dem Login kopieren

Dieser Wert msg wird an das Attribut props der untergeordneten Komponente und der untergeordneten Komponente gebunden kann direkt verwendet werden:

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;

Nach dem Login kopieren

Die übergeordnete Komponente kann Werte und Methoden an die Komponente übergeben und sich sogar selbst an die untergeordnete Komponente übergeben

3.1 Werte übergeben Was 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;

Nach dem Login kopieren

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;

Nach dem Login kopieren

3.2 Methoden übergeben

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;

Nach dem Login kopieren

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;

Nach dem Login kopieren

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

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;
```
![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)

Nach dem Login kopieren

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!