一、业务场景:
最近在使用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;
四、效果展示
今天的分享到此结束,欢迎小伙伴们一起交流