Antd Comment 递归循环评论

一、业务场景：
最近在使用umi和Antd 进行开发，其中在做多级嵌套评论的时候遇到了一些坑，为了大家后面遇到和我一样的问题，给大家分享一下

加粗样式二、解决方案：
先定义函数组件，返回要渲染的页面结构。再书写主函数，写一个递归调用组件的方法，并对之前的函数组件进行循环遍历，通过判断多次调用，最后返回递归组件渲染到页面上

三、具体实现步骤

1、定义函数组件，返回要渲染的页面结构

import { ReactElement, useCallback } from 'react';
import { Avatar, Comment } from 'antd';

const ExampleComment = (props) => {
  console.log(props)
  const { children, _node: { name } } = props;
  return <Comment actions={[<span key="comment-nested-reply-to">Reply to</span>]}
    author={
   <a>Han Solo</a>}
    avatar={
   <Avatar src="https://joeschmoe.io/api/v1/random" alt="Han Solo" />}
    content={
      <p>
        {name}
      </p>
    }
  >
    {children}
  </Comment>
};

2、书写主函数，写一个递归调用组件的方法，并对之前的函数组件进行循环遍历，通过判断多次调用，最后返回递归组件渲染到页面上

function notificationrecord(): ReactElement {
  const renderTreeNodes = useCallback(
    (node): ReactElement[] => {
      if (!node) return [];
      return node.map((_node) => (
        <ExampleComment key={_node.id} _node={_node}>
          {renderTreeNodes(_node.children)}
        </ExampleComment>
      ));
    },
    [],
  );

  return (
    <>
      {
        renderTreeNodes(data)
      }
    </>
  );
}
export default notificationrecord;

3、完整代码如下

import { ReactElement, useCallback } from 'react';
import { Avatar, Comment } from 'antd';

const ExampleComment = (props) => {
  console.log(props)
  const { children, _node: { name } } = props;
  return <Comment actions={[<span key="comment-nested-reply-to">Reply to</span>]}
    author={
   <a>Han Solo</a>}
    avatar={
   <Avatar src="https://joeschmoe.io/api/v1/random" alt="Han Solo" />}
    content={
      <p>
        {name}
      </p>
    }
  >
    {children}
  </Comment>
};

function notificationrecord(): ReactElement {
  const data = [
    {
      id: 1,
      name: '我是个笨蛋，大写的',
      children: [
        {
          id: 11,
          name: '我是个笨蛋，大写的',
          children: [{
            id: 111,
            name: '我是个笨蛋，大写的',
          }]
        },
        {
          id: 12,
          name: '我是个笨蛋，大写的',
          children: [{
            id: 121,
            name: '我是个笨蛋，大写的',
          }]
        },
      ]
    },
    {
      id: 12,
      name: '我是个笨蛋，大写的',
      children: [
        {
          id: 121,
          name: '我是个笨蛋，大写的',
          children: [{
            id: 1211,
            name: '我是个笨蛋，大写的',
          }]
        },
        {
          id: 212,
          name: '我是个笨蛋，大写的',
          children: [{
            id: 1221,
            name: '我是个笨蛋，大写的',
          }]
        },
      ]
    }
  ]
  const renderTreeNodes = useCallback(
    (node): ReactElement[] => {
      if (!node) return [];
      return node.map((_node) => (
        <ExampleComment key={_node.id} _node={_node}>
          {renderTreeNodes(_node.children)}
        </ExampleComment>
      ));
    },
    [],
  );

  return (
    <>
      {
        renderTreeNodes(data)
      }
    </>
  );
}
export default notificationrecord;

四、效果展示

今天的分享到此结束，欢迎小伙伴们一起交流