React 中的递归组件

相信大多数人都对递归的概念很熟悉。如果没有，请通过此链接www.geeksforgeeks.org/recursion/。

例子是解释某事的最佳方式，所以我们也会举一个例子。

假设您必须为嵌套评论制作一个组件（您有一条评论，当您回复该评论时，它应该以嵌套格式显示，等等） 这是一张供您参考的图片。

所以，让我们把问题分成两部分。

第 1 部分：为正常的评论列表制作组件。

第 2 部分：修改嵌套评论的组件。

你可以在这里codesandbox.io/s/quirky-el… 找到完整的工作代码

第 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
      }
    ]
  }
]);

现在，在父组件中的commentsArray上进行映射，并在映射内为每个项目返回另一个组件CommentItem 。

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

我们将整个实例作为属性传递给 CommentItem 组件。

这就是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

第 2 部分：修改嵌套评论的组件

添加一个变量并检查特定的评论里面是否有该变量。replies

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

如果您仔细查看上面的代码片段，我们正在检查是否有对该特定评论的进一步回复，并将其映射并使用相同的组件（即 CommentItem）返回它

我们将在 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

这将使我们的组件递归，并且对于每个评论，它将检查是否有任何回复，如果是，则由于nestedComments而返回另一个评论项，依此类推，直到找不到更多回复

暂时就是这样，如有任何疑问，请联系我