Comment créer un composant de mise en page de maçonnerie à l'aide de React.

La disposition de maçonnerie est une sorte de disposition dans laquelle la largeur ou la hauteur des éléments sont fixes, tandis que l'autre dimension est variable. Il assure également un écart uniforme entre les éléments.

Maçonnerie

Dans ce tutoriel, nous allons créer un composant React qui rend ses enfants en utilisant une disposition de maçonnerie de largeur uniforme comme dans ce stylo que j'ai créé. Voici comment nous nous attendons à ce que le composant soit utilisé.


  
élément   
élément   // Plus d'articles

Conditions préalables.

  • Connaissance de base en javascript, telle que la déclaration de variables et l'utilisation de tableaux.
  • Un environnement de développement React fonctionnel. Vous pouvez utiliser create-react-app.
  • Basic React - JSX, composants fonctionnels et déclaration propType.
  • prop-types package. npm install --save prop-types

Création du composant.

Le composant que nous allons créer sera un composant fonctionnel.

import Réagir de 'réagir';
importer des PropTypes à partir de "types de prop";
const MasonryLayout = props => {
}

Notre composant aura certains accessoires: colonnes (nombre de colonnes dans la structure en maçonnerie), espace (espace entre les éléments) et enfants. Nous devrons faire des calculs avec colonne et gap, leur type sera donc numérique.

Définissons les propTypes du composant et leurs valeurs par défaut, comme indiqué ci-dessous.

MasonryLayout.propTypes = {
  colonnes: PropTypes.number.isRequired,
  gap: PropTypes.number.isRequired,
  enfants: PropTypes.arrayOf (PropTypes.element),
};
MasonryLayout.defaultProps = {
  colonnes: 2,
  écart: 20,
};

Le prop enfants sera un tableau d'éléments qui seront définis entre les balises de début () et de fin () de notre composant. Nous allons utiliser cet accessoire pour accéder aux éléments que notre composant de présentation rendra.

Nous devons créer de manière dynamique des tableaux contenant des éléments dans chaque colonne. Dans la fonction MasonryLayout, créons et déclarons certaines variables.

const MasonryLayout = props => {
  const columnWrapper = {};
  const result = [];
}

L'objet columnWrapper nous permettra de créer de manière dynamique des tableaux que nous pourrons utiliser comme «compartiments» pour contenir des éléments dans chaque colonne. Le tableau de résultats contiendra des éléments de colonne (jsx). C'est ce qui doit être retourné par le composant.

Créez les colonnes comme indiqué ci-dessous.

// créer des colonnes
for (let i = 0; i 

Divisez les enfants en colonnes comme indiqué ci-dessous.

for (let i = 0; i 
      {props.children [i]}
    
  )
}

Dans le code ci-dessus, encapsulait l'élément enfant avec un div avant d'insérer la colonne. Cela nous permet d'ajouter de l'espace entre les éléments de la colonne à l'aide de la marge inférieure.

L'étape suivante consistera à encapsuler les éléments de chaque colonne avec un div et à les insérer dans le tableau de résultats, comme indiqué ci-dessous.

for (let i = 0; i  0? props.gap: 0} px`,
        flex: 1,
      }}>
      {columnWrapper [`column $ {i}`]}
    
  )
}

Nous avons besoin d'espace entre les colonnes, donc l'ajout d'une marge gauche sur toutes les colonnes, à l'exception de la première, fait l'affaire. Les colonnes seront rendues dans un conteneur flex d'où le flex: 1.

Emballons le résultat dans un conteneur flexible et le retournons.

revenir (