Que sont les composants parent-enfant en réaction

Dans les appels mutuels entre les composants de réaction, l'appelant est appelé le composant parent et l'appelé est appelé le composant enfant. Les valeurs peuvent être transmises entre les composants parent et enfant : 1. Lorsqu'un composant parent transmet une valeur à un composant enfant, la valeur à transmettre est d'abord transmise au composant enfant, puis dans le composant enfant, les accessoires sont utilisés pour recevoir la valeur transmise par le composant parent ;2. Composant enfant Lorsque vous transmettez des valeurs au composant parent, vous devez les transmettre au composant parent via la méthode de déclenchement.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version React18, ordinateur Dell G3.

1. Composants dans React

Le composant React est une balise non-html auto-définie. Il est stipulé que la première lettre du composant React doit être en majuscule : 首字母大写：

class App extends Component{
}

<app></app>

二、父子组件

组件的相互调用中，把调用者称为父组件，被调用者称为子组件：

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

2. Dans l'appel mutuel de composants parent et enfant

composants, put L'appelant est appelé le composant parent, et l'appelé est appelé le composant enfant :

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

3. transmet la valeur au composant enfant

Le composant parent transmet la valeur au composant enfant Les valeurs utilisent des accessoires. Lorsqu'un composant parent transmet une valeur à un composant enfant, la valeur à transmettre est d'abord transmise au composant enfant, puis dans le composant enfant, les accessoires sont utilisés pour recevoir la valeur transmise par le composant parent.

Le composant parent définit une propriété lors de l'appel du composant enfant :

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 run={this.run} />
            </div>
        )
    }
}

export default Up;

Cette valeur msg sera liée à l'attribut props du composant enfant, et le composant enfant peut être utilisé directement :

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 onClick={this.run}>Run</button>
            </div>
        )
    }
}

export default Children;

Le composant parent peut transmettre des valeurs et des méthodes au composant, et peut même se transmettre au composant enfant

3.1 Passer des valeurs

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 onClick={this.run}>Run</button>
            </div>
        )
    }
}

export default Children;

3.2 Passer des méthodes

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(
            <div>
                up
                <Children upFun={this.getChildrenData}/>
            </div>
        )
    }
}

export default Up;

import React from 'react';

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;

3.3 will Le composant parent transmet la valeur au composant enfant

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(
            <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;
```
![Que sont les composants parent-enfant en réaction](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

🎜🎜4. Le composant enfant transmet la valeur au composant parent🎜🎜🎜Le composant enfant transmet la valeur au parent. composant via la méthode de déclenchement🎜rrreeerrreee🎜🎜🎜🎜🎜5. Le composant parent Obtenez les attributs et les méthodes des sous-composants via refs🎜🎜rrreee🎜[Recommandations associées : 🎜Tutoriel vidéo Redis🎜]🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!