基于antd实现一个Tree树形控件

王小婷

发布于 2025-05-19 15:08:41

2830

前面学会了antd的使用步骤，现在要使用一下Tree树形控件，话不多说，继续记录....

写这些，其实最重要的是提醒自己，凡是前端技术，认真看好文档教程，加上自己的思考尝试，差不多就成功了一半了，千万不要从入门到放弃哦。准备下一个项目，开始使用react框架，让自己能够一边开发，一边熟悉。

1：首先生成一个空组件模板

import React, { Component } from 'react';
class Treetest extends Component {
    constructor(props) {
        super(props);
        //react定义数据
        this.state = {
        }
    }
    render() {
        return (
            <div>
                <h2>我是Tree树形控件</h2>                           
            </div>
        )
    }
}
export default  Treetest;

2：在空组件里面引入Tree树形控件要用到的组件

import { Tree } from 'antd';
const { TreeNode } = Tree;

3：参考antd文档：关于Tree树形控件的相关，重要的话说三遍... https://ant.design/components/tree-cn/

4： render()内容从文档里面找到相关内容，ctrl c + ctrl v

5：参考代码如下

import React, { Component } from 'react';
import { Tree } from 'antd';
const { TreeNode } = Tree;
class Treetest extends Component {
    constructor(props) {
        super(props);
        //react定义数据
        this.state = {
        }
    }
    render() {
        return (
          <Tree
            checkable
            defaultExpandedKeys={['0-0-0', '0-0-1']}
            defaultSelectedKeys={['0-0-0', '0-0-1']}
            defaultCheckedKeys={['0-0-0', '0-0-1']}
            onSelect={this.onSelect}
            onCheck={this.onCheck}
          >
            <TreeNode title="parent 1" key="0-0">
              <TreeNode title="parent 1-0" key="0-0-0" disabled>
                <TreeNode title="leaf" key="0-0-0-0" disableCheckbox />
                <TreeNode title="leaf" key="0-0-0-1" />
              </TreeNode>
              <TreeNode title="parent 1-1" key="0-0-1">
                <TreeNode title={<span style={{ color: '#1890ff' }}>sss</span>} key="0-0-1-0" />
              </TreeNode>
            </TreeNode>
          </Tree>
        );
      }
}
export default  Treetest;

实现效果，一个Tree树形控件就出现啦，现在要把这个用在项目里面啦，选择自己喜欢的样式，添加上去，就搞定啦。