Composants imbriqués

Introduction

Comme nous l'avons appris précédemment, le composant React est le bloc de construction d'une application React. Un composant React est constitué de plusieurs composants individuels. React permet de combiner plusieurs composants pour créer des composants plus grands. En outre, les composants React peuvent être imbriqués à n'importe quel niveau arbitraire. Voyons comment les composants React peuvent être composés dans ce chapitre.

Composant argent formaté

Créons un composant, FormattedMoney, pour formater le montant à deux décimales avant le rendu.

Ouvrez notre application de gestion des dépenses dans votre éditeur préféré.

Ensuite, créez un fichier FormattedMoney.js dans le dossier src/components et importez la bibliothèque React.

import React from 'react';

Ensuite, créez une classe, FormattedMoney en étendant React.Component.

class FormattedMoney extends React.Component { 
}

Ensuite, introduisez la fonction de construction avec les arguments props comme indiqué ci-dessous -

constructor(props) { 
    super(props); 
}

Ensuite, créez un format de méthode pour mettre en forme le montant.

format(amount) { 
    return parseFloat(amount).toFixed(2) 
}

Ensuite, créez une méthode render pour émettre le montant formaté.

render() {
    return (
        <span>{this.format(this.props.value)}</span> 
    ); 
}

Ici, nous avons utilisé la méthode de formatage en passant l'attribut valeur à travers this.props.

Ensuite, spécifiez le composant comme classe d'exportation par défaut.

export default FormattedMoney;

Maintenant, nous avons créé avec succès notre composant React FormattedMoney.

import React from 'react';

class FormattedMoney extends React.Component {
    constructor(props) {
        super(props)
    }
    format(amount) {
        return parseFloat(amount).toFixed(2)
    }
    render() {
        return (
            <span>{this.format(this.props.value)}</span>
        );
    }
}
export default FormattedMoney;