---
title: 自定义树形 业务组件
sidemenu: true
---

## 自定义树形 业务组件

这是一个完全受控的组件，需要配合value 和 onChange 使用

```tsx
/**
 * background: '#f0f2f5'
 */
import React, {useState} from 'react';
import { Space } from 'antd';
import {CustomTree} from '@/components';

const treeData = [
  {
    id: 1,
    name: 'test1',
    children: [
      {
        id: 11,
        name: 'test1-1',
        children: [
          {
            id: 111,
            name: 'test1-1-1',
          },
          {
            id: 112,
            name: 'test1-1-2',
          },
          {
            id: 113,
            name: 'test1-1-3',
          },
          {
            id: 114,
            name: 'test1-1-4',
          }
        ],
      },
      {
        id: 12,
        name: 'test1-2',
      },
      {
        id: 13,
        name: 'test1-3',
      },
      {
        id: 14,
        name: 'test1-4',
      }
    ],
  },
  {
    id: 2,
    name: 'test2',
  },
  {
    id: 3,
    name: 'test3',
    children: [
      {
        id: 31,
        name: 'test3-1',
      },
      {
        id: 32,
        name: 'test3-2',
      },
      {
        id: 33,
        name: 'test3-3',
      },
      {
        id: 34,
        name: 'test3-4',
      }
    ],
  },
  {
    id: 4,
    name: 'test4',
  }
];

export default () => {
  const [value, setValue] = useState([]);
  return (
  <Space>
    <CustomTree value={value} onChange={setValue}  width="500px" treeData={treeData} />
    <CustomTree value={value} onChange={setValue} isHaveDate placeholder="请选择" width="500px" treeData={treeData} oldData={treeData} />
  </Space>
)};
```

<API src="./index.tsx"></API>