Antd comment recursive loop comment

One 、 Business scenario ：
Recently in use umi and Antd Development , It's doing Multi level nested comments When I met some pits , For everyone to meet the same problem as me later , Let me share with you

Bold style Two 、 Solution ：
First define the function component , Return to the page structure to render . Then write the main function , Write a method that recursively calls components , And loop through the previous function components , Call multiple times through judgment , Finally, the recursive component is returned and rendered on the page

3、 ... and 、 Specific implementation steps

1、 Define function components , Return to the page structure to render

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、 Write the main function , Write a method that recursively calls components , And loop through the previous function components , Call multiple times through judgment , Finally, the recursive component is returned and rendered on the page

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、 The complete code is as follows

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: ' I'm a fool , uppercase ',
      children: [
        {
          id: 11,
          name: ' I'm a fool , uppercase ',
          children: [{
            id: 111,
            name: ' I'm a fool , uppercase ',
          }]
        },
        {
          id: 12,
          name: ' I'm a fool , uppercase ',
          children: [{
            id: 121,
            name: ' I'm a fool , uppercase ',
          }]
        },
      ]
    },
    {
      id: 12,
      name: ' I'm a fool , uppercase ',
      children: [
        {
          id: 121,
          name: ' I'm a fool , uppercase ',
          children: [{
            id: 1211,
            name: ' I'm a fool , uppercase ',
          }]
        },
        {
          id: 212,
          name: ' I'm a fool , uppercase ',
          children: [{
            id: 1221,
            name: ' I'm a fool , uppercase ',
          }]
        },
      ]
    }
  ]
  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;

Four 、 Effect display

This is the end of today's sharing , Welcome friends to communicate together