Рекурсивные компоненты в React

Я считаю, что большинство из вас должно быть знакомо с концепцией рекурсии . Если нет, перейдите по этой ссылке .

Примеры - лучший способ что-то объяснить, поэтому мы также рассмотрим пример.

Предположим, вам нужно создать компонент для вложенных комментариев (у вас есть комментарий, и когда вы отвечаете на этот комментарий, он должен отображаться во вложенном формате и т. Д.)
Вот изображение для вашей справки.

Итак, давайте разделим проблему на две части.
Часть 1: Сделайте компонент для обычного списка комментариев.
Часть 2: Измените компонент вложенных комментариев.

Вы можете найти полный рабочий код здесь

Часть 1: Сделайте компонент для обычного списка комментариев.
Во-первых, поддерживайте состояние массива комментариев.

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>

Вот как выглядит ваш компонент 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}
/>
);
});

Мы добавим эту константу в наш оператор возврата CommentItem. Итак, наш последний компонент выглядит примерно так.

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

На этом пока все, по любым вопросам обращайтесь ко мне по адресу [email protected] .