React'te Özyinelemeli Bileşenler

Çoğunuzun Özyineleme kavramına aşina olması gerektiğine inanıyorum . Değilse, lütfen bu bağlantı üzerinden gidin .

Örnekler, bir şeyi açıklamanın en iyi yoludur, bu yüzden biz de bir örnek alacağız.

İç İçe Yorumlar için bir Bileşen yapmanız gerektiğini varsayalım (Bir yorumunuz var ve bu yorumu yanıtladığınızda iç içe geçmiş bir biçimde görünmelidir vb.)
İşte size referans olması için bir resim.

O halde sorunu iki kısma ayıralım.
Bölüm 1: Normal yorum listesi için bileşeni yapın.
Bölüm 2: İç İçe Yorumlar için bileşeni değiştirin.

Tam çalışma kodunu burada bulabilirsiniz

Bölüm 1: Normal yorum listesi için bileşeni yapın.
İlk olarak, yorum dizisi için bir durum sağlayın.

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>

Bu nasıl olduğu CommentItem gibi bileşen görünüyor.

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

Bu sabiti CommentItem dönüş ifademize ekleyeceğiz. Yani, son bileşenimiz şuna benziyor.

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

Şimdilik bu kadar, sorularınız için [email protected] adresinden bana ulaşabilirsiniz .