Komponen Rekursif di React

Saya yakin sebagian besar dari Anda pasti sudah familiar dengan konsep Rekursi . Jika tidak, silakan buka tautan ini .

Contoh adalah cara terbaik untuk menjelaskan sesuatu, jadi kami juga akan mengambil contoh.

Misalkan Anda harus membuat Komponen untuk Komentar Bersarang (Anda memiliki komentar dan ketika Anda membalas komentar itu, itu akan muncul dalam format bersarang dan seterusnya)
Berikut adalah gambar untuk referensi Anda.

Jadi, mari kita bagi masalah menjadi dua bagian.
Bagian 1 : Buat komponen untuk daftar komentar normal.
Bagian 2: Memodifikasi komponen untuk Nested Comments.

Anda dapat menemukan kode kerja lengkap di sini

Bagian 1 : Buat komponen untuk daftar komentar normal.
Pertama, pertahankan status untuk array komentar.

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>

Ini adalah bagaimana komponen CommentItem Anda terlihat.

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

Kami akan menambahkan konstanta ini dalam pernyataan pengembalian kami di CommentItem. Jadi, komponen terakhir kita terlihat seperti ini.

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

Itu saja untuk saat ini, untuk pertanyaan apa pun, hubungi saya di [email protected] .