当前位置:网站首页>Antd Comment 递归循环评论
Antd Comment 递归循环评论
2022-07-06 21:09:00 【拾忆@y】
一、业务场景:
最近在使用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;
四、效果展示
今天的分享到此结束,欢迎小伙伴们一起交流
边栏推荐
- About Tolerance Intervals
- codeforces每日5题(均1700)-第七天
- . Net interface can be implemented by default
- About Confidence Intervals
- web服务性能监控方案
- 你心目中的数据分析 Top 1 选 Pandas 还是选 SQL?
- C# Task拓展方法
- Set WiFi automatic connection for raspberry pie
- Ubuntu 20 installation des enregistrements redisjson
- QT opens a file and uses QFileDialog to obtain the file name, content, etc
猜你喜欢
Flutter3.0, the applet is not only run across mobile applications
[leetcode] 700 and 701 (search and insert of binary search tree)
枚举通用接口&枚举使用规范
[leetcode] 450 and 98 (deletion and verification of binary search tree)
Not All Points Are Equal Learning Highly Efficient Point-based Detectors for 3D LiDAR Point
1200.Minimum Absolute Difference
卡尔曼滤波-1
22. (ArcGIS API for JS) ArcGIS API for JS Circle Collection (sketchviewmodel)
24. (ArcGIS API for JS) ArcGIS API for JS point modification point editing (sketchviewmodel)
Depth analysis of compilation constants, classloader classes, and system class loaders
随机推荐
Allow public connections to local Ruby on Rails Development Server
Machine learning notes - bird species classification using machine learning
OSCP工具之一: dirsearch用法大全
维护万星开源向量数据库是什么体验
19. (ArcGIS API for JS) ArcGIS API for JS line acquisition (sketchviewmodel)
My brave way to line -- elaborate on what happens when the browser enters the URL
Can the applet run in its own app and realize live broadcast and connection?
MySQL storage engine
QT opens a file and uses QFileDialog to obtain the file name, content, etc
Kotlin Android environment construction
1200.Minimum Absolute Difference
20. (ArcGIS API for JS) ArcGIS API for JS surface collection (sketchviewmodel)
Hongmi K40S root gameplay notes
It's too convenient. You can complete the code release and approval by nailing it!
Enumeration general interface & enumeration usage specification
未来发展路线确认!数字经济、数字化转型、数据...这次会议很重要
再AD 的 界面顶部(菜单栏)创建常用的快捷图标
What is the experience of maintaining Wanxing open source vector database
Termux set up the computer to connect to the mobile phone. (knock the command quickly), mobile phone termux port 8022
MySQL的存储引擎