Composants récursifs dans React

Je crois que la plupart d'entre vous doivent être familiers avec le concept de récursivité . Si ce n'est pas le cas, veuillez passer par ce lien .

Les exemples sont la meilleure façon d'expliquer quelque chose, nous allons donc également prendre un exemple.

Supposons que vous deviez créer un composant pour les commentaires imbriqués (vous avez un commentaire et lorsque vous répondez à ce commentaire, il doit apparaître dans un format imbriqué, etc.)
Voici une image pour votre référence.

Alors, divisons le problème en deux parties.
Partie 1 : Créer le composant pour la liste normale des commentaires.
Partie 2 : Modifier le composant pour les commentaires imbriqués.

Vous pouvez trouver le code de travail complet ici

Partie 1 : Créer le composant pour la liste normale des commentaires.
Tout d'abord, maintenez un état pour un tableau de commentaires.

const getDate = () => {
var today = new Date();
return (
today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate()
);
};
const getTime = () => {
var today = new Date();
return today.getHours() + ":" + today.getMinutes();
};
const [commentsArray, setCommentsArray] = useState([
{
username: Jen,
userId: 1,
date: getDate(),
time: getTime(),
content: "How Artistic!",
replies: [
 {
 username: Elliot,
 userId: 2,
 date: getDate(),
 time: getTime(),
 content: "True",
 replies: []  //This represents the nested comment
 }
]
}
]);

//inside return statement of parent component
<div>
{commentsArray.map((item, index) => {
return (
 <CommentItem
 key={index}
 getDate={getDate}
 getTime={getTime}
 item={item}
 />
);
})}
</div>

Voici à quoi ressemble votre composant CommentItem .

import React, { useState }from 'react'
//props.item is each comment
function CommentItem(props) {
return (
<div>
<div>{props.item.username}</div>
<div>{props.item.date} at {props.item.time}</div>
</div>
)
}
export default CommentItem

const nestedComments = (props.item.replies || [])
.map((item, index) => {
return (
<CommentItem
 item={item}
 key={index}
/>
);
});

Nous allons ajouter cette constante dans notre déclaration de retour de CommentItem. Ainsi, notre composant final ressemble à ceci.

import React, { useState }from 'react'
//props.item is each comment
function CommentItem(props) {
const nestedComments = (props.item.replies || [])
.map((item, index) => {
return (
<CommentItem
 item={item}
 key={index}
/>
);
});
return (
<div>
<div>{props.item.username}</div>
<div>{props.item.date} at {props.item.time}</div>
<div>{nestedComments}</div>
</div>
)
}
export default CommentItem

C'est tout pour l'instant, pour toute question, contactez-moi à [email protected] .