前言
浏览一些主流面试题的时候,发现有的面试题让动手写一个基于antd的树形控件的增删改功能,本来以为antd的组件应该挺简单的,没想到动手做的时候还是费了不少力气。所以就打算记录一下,实现需求的整个过程。
一、 引入antd的树形控件
使用过antd的小伙伴应该都知道,使用antd就是把它的代码示例粘贴下来,然后根据自己的需求和antd提供的API进行更改。所以这里我也是找一个简单antd树形控件代码示例,不管三七二十一先粘贴进去看看结果怎么样。
import React from "react";
import {
Tree } from "antd";
const treeData = [
{
title: "0-0",
key: "0-0",
children: [
{
title: "0-0-0",
key: "0-0-0",
children: [
{
title: "0-0-0-0", key: "0-0-0-0" },
{
title: "0-0-0-1", key: "0-0-0-1" },
{
title: "0-0-0-2", key: "0-0-0-2" },
],
},
{
title: "0-0-1",
key: "0-0-1",
children: [
{
title: "0-0-1-0", key: "0-0-1-0" },
{
title: "0-0-1-1", key: "0-0-1-1" },
{
title: "0-0-1-2", key: "0-0-1-2" },
],
},
{
title: "0-0-2",
key: "0-0-2",
},
],
},
{
title: "0-1",
key: "0-1",
children: [
{
title: "0-1-0-0", key: "0-1-0-0" },
{
title: "0-1-0-1", key: "0-1-0-1" },
{
title: "0-1-0-2", key: "0-1-0-2" },
],
},
{
title: "0-2",
key: "0-2",
},
];
export default function TreeDemo() {
return (
<div>
<Tree treeData={
treeData} />
</div>
);
}
这里就实现了一个简单的tree形组件,但是这个组件除了可以浏览之外,基本没什么作用,所以还需要对它进行再度改造。
二、 改造组件代码结构
一般使用antd组件的时候,最重要的就是使用antd提供的API,咱们虽然不会写,但是会用应该还是挺容易的。在浏览树形控件的API时发现,<Tree/>
组件有个子组件<TreeNode/>
,它就是组成整个树形控件的最小单元。所以我们如果要实现增删改的话,就要在这个<TreeNode/>
组件上下功夫。根据这个思路然后改造成如下的样子。
import React, {
useState } from "react";
import {
Tree } from "antd";
const {
TreeNode } = Tree;
const treeData = [
{
value: "0",
key: "0",
children: [
{
value: "0-1",
key: "0-1",
},
{
value: "0-2",
key: "0-2",
},
],
},
];
export default function TreeDemo() {
const [data, setdata] = useState(treeData);
const renderTreeNodes = (data) => {
let nodeArr = data.map((item) => {
item.title = <span>{
item.value}</span>;
if (item.children) {
return (
<TreeNode title={
item.title} key={
item.key} dataRef={
item}>
{
renderTreeNodes(item.children)}
</TreeNode>
);
}
return <TreeNode title={
item.title} key={
item.key} />;
});
return nodeArr;
};
return (
<div>
<Tree>{
renderTreeNodes(data)}</Tree>
</div>
);
}
然后就是如下的样子:
这里要说明的一点是<TreeNode/>
的title接收的是ReactNode类型数据,所以大家可以根据这个来自己定义要展示数据的样式,比如加上icon之类的。然后到这里,大家应该就知道了,需求里面不是说要有增删改的功能吗,正好可以借助这个title来展示一下,胜利就在眼前,接着改造代码。
import React, {
useState } from "react";
import {
Tree } from "antd";
import {
EditOutlined,
PlusOutlined,
MinusOutlined,
} from "@ant-design/icons";
const {
TreeNode } = Tree;