Rekursive Komponenten in React

Ich glaube, die meisten von Ihnen müssen mit dem Konzept der Rekursion vertraut sein . Wenn nicht, gehen Sie bitte über diesen Link .

Beispiele sind der beste Weg, um etwas zu erklären, daher werden wir auch ein Beispiel aufgreifen.

Angenommen, Sie müssen eine Komponente für verschachtelte Kommentare erstellen (Sie haben einen Kommentar und wenn Sie auf diesen Kommentar antworten, sollte er in einem verschachtelten Format erscheinen usw.)
Hier ist ein Bild als Referenz.

Teilen wir das Problem also in zwei Teile auf.
Teil 1: Erstellen Sie die Komponente für die normale Kommentarliste.
Teil 2: Ändern Sie die Komponente für verschachtelte Kommentare.

Den vollständigen Arbeitscode finden Sie hier

Teil 1: Erstellen Sie die Komponente für die normale Kommentarliste.
Pflegen Sie zunächst einen Status für das Array von Kommentaren.

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>

So sieht Ihre CommentItem- Komponente aus.

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}
/>
);
});

Wir werden diese Konstante in unserer Rückgabeanweisung von CommentItem hinzufügen. Unsere letzte Komponente sieht also ungefähr so ​​​​aus.

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

Das war's für den Moment , für Fragen erreichen Sie mich unter [email protected] .