# react-tree

**Repository Path**: nie_mingwang/react-tree

## Basic Information

- **Project Name**: react-tree
- **Description**: react树形组件
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 3
- **Created**: 2023-02-03
- **Last Updated**: 2023-02-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# react-tree

#### 介绍
react树形组件
![输入图片说明](https://images.gitee.com/uploads/images/2022/0119/213629_2503d6ee_5712027.png "屏幕截图.png")
#### 软件架构
 基于ReactHook开发的一款树形组件，可以支持单选、多选，多选的时候可以支持选择是否有级联关系。

#### 安装教程

1.  下载代码
2.  npm install
3.  npm run start

#### 使用说明

```
import ReactTree from './components/Tree/ReactTree';
const rootData = [
    {
      id: 1,
      title: '体育运动',
      children: [
        {
          id: 1.1,
          title: '球类',
          children: [
            {
              id: '1.1.1',
              title: '篮球',
            },
            {
              id: '1.1.2',
              title: '羽毛球',
            }
          ]
        },
        {
          id: 1.2,
          title: '田径类',
          children: [
            {
              id: '1.2.1',
              title: '短跑',
            },
            {
              id: '1.2.2',
              title: '长跑',
            }
          ]
        }
      ]
    },
    {
      id: 2,
      title: '明星',
    },
    {
      id: 3,
      title: '科学家',
      children: [
        {
          id: 4,
          title: '物理学家',
          children: [
            {
              id: '4.1',
              title: '爱因斯坦',
            },
            {
              id: '4.2',
              title: '牛顿',
            },
            {
              id: '4.3',
              title: '杨振宁',
            }
          ]
        },
      ]
    }
  ]
<ReactTree
    data={rootData}
    checkbox={true}
    casade={false}
    onChangeExpand={(treeData: any[], currentNode: any[]) => {
      console.log(treeData);
      console.log(currentNode)
    }}
    onSelectNode={(treeData: any[], currentNode: any[]) => {
      console.log(treeData);
      console.log(currentNode)
    }}
/>

```

1.  npm run start
2.  打开http://localhost:3000/即可

#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request


#### 特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)