当前位置:网站首页>Antd comment recursive loop comment
Antd comment recursive loop comment
2022-07-07 04:02:00 【Recall @y】
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
边栏推荐
- API data interface of A-share index component data
- A 股指数成分数据 API 数据接口
- Implementation of map and set
- Vernacular high concurrency (2)
- Ggplot facet detail adjustment summary
- [security attack and Defense] how much do you know about serialization and deserialization?
- 链表面试常见题
- Tencent cloud native database tdsql-c was selected into the cloud native product catalog of the Academy of communications and communications
- Mysql-数据丢失,分析binlog日志文件
- 【knife-4j 快速搭建swagger】
猜你喜欢
Kotlin Android environment construction
太方便了,钉钉上就可完成代码发布审批啦!
2022夏每日一题(一)
【OA】Excel 文档生成器: Openpyxl 模块
自适应非欧表征广告检索系统AMCAD
Calculation of time and space complexity (notes of runners)
leetcode:面试题 17.24. 子矩阵最大累加和(待研究)
A 股指数成分数据 API 数据接口
Summer 2022 daily question 1 (1)
10 ways of interface data security assurance
随机推荐
easyui出口excel无法下载框弹出的办法来解决
ABAP Dynamic Inner table Group cycle
使用切面实现记录操作日志
C task expansion method
如何检测mysql代码运行是否出现死锁+binlog查看
维护万星开源向量数据库是什么体验
What is Ba? How about Ba? What is the relationship between Ba and Bi?
二叉搜索树的实现
QT 使用QToolTip 鼠标放上去显示文字时会把按钮的图片也显示了、修改提示文字样式
VHDL implementation of single cycle CPU design
如何编写一个程序猿另一个面试官眼前一亮的简历[通俗易懂]
The true face of function pointer in single chip microcomputer and the operation of callback function
codeforces每日5题(均1700)-第七天
红米k40s root玩机笔记
POJ培训计划2253_Frogger(最短/floyd)
Tflite model transformation and quantification
On file uploading of network security
【OA】Excel 文档生成器: Openpyxl 模块
PHP lightweight Movie Video Search Player source code
Search of linear table