0
# TreeNode Component
1

2
The TreeNode component provides a declarative JSX-based approach to defining tree structure for TreeSelect. It's particularly useful for static tree data that can be expressed in JSX form.
3

4
## Capabilities
5

6
### TreeNode Component
7

8
Declarative component for defining tree structure using JSX syntax.
9

10
```typescript { .api }
11
/**
12
 * TreeNode component for declarative tree structure definition
13
 * @param props - TreeNode properties extending DataNode with value and children
14
 */
15
declare const TreeNode: React.FC<TreeNodeProps>;
16

17
interface TreeNodeProps extends DataNode {
18
  /** Required value for the tree node */
19
  value: Key;
20
  /** Child TreeNode components for nested structure */
21
  children?: React.ReactNode;
22
}
23
```
24

25
**Usage Examples:**
26

27
```typescript
28
import TreeSelect, { TreeNode } from "rc-tree-select";
29

30
// Declarative tree structure using TreeNode JSX
31
function DeclarativeTreeExample() {
32
  const [value, setValue] = useState();
33

34
  return (
35
    <TreeSelect
36
      style={{ width: 300 }}
37
      value={value}
38
      onChange={setValue}
39
      placeholder="Select from tree"
40
      treeDefaultExpandAll
41
    >
42
      <TreeNode value="parent1" title="Parent Node 1">
43
        <TreeNode value="child1-1" title="Child 1-1" />
44
        <TreeNode value="child1-2" title="Child 1-2" />
45
        <TreeNode value="parent1-1" title="Parent 1-1">
46
          <TreeNode value="grandchild1-1-1" title="Grandchild 1-1-1" />
47
        </TreeNode>
48
      </TreeNode>
49
      <TreeNode value="parent2" title="Parent Node 2">
50
        <TreeNode value="child2-1" title="Child 2-1" />
51
      </TreeNode>
52
    </TreeSelect>
53
  );
54
}
55

56
// TreeNode with custom properties
57
function CustomTreeNodeExample() {
58
  const [value, setValue] = useState();
59

60
  return (
61
    <TreeSelect
62
      style={{ width: 300 }}
63
      value={value}
64
      onChange={setValue}
65
      treeCheckable
66
      multiple
67
    >
68
      <TreeNode 
69
        value="documents" 
70
        title="Documents"
71
        icon={<FolderIcon />}
72
      >
73
        <TreeNode 
74
          value="doc1" 
75
          title="Important Document"
76
          disabled
77
        />
78
        <TreeNode 
79
          value="doc2" 
80
          title="Regular Document"
81
          checkable={false}
82
        />
83
      </TreeNode>
84
      <TreeNode 
85
        value="pictures" 
86
        title="Pictures"
87
        icon={<ImageIcon />}
88
      >
89
        <TreeNode value="pic1" title="Photo 1.jpg" />
90
        <TreeNode value="pic2" title="Photo 2.png" />
91
      </TreeNode>
92
    </TreeSelect>
93
  );
94
}
95

96
// Mixed approach: TreeNode with dynamic children
97
function MixedApproachExample() {
98
  const [value, setValue] = useState();
99
  const [dynamicChildren, setDynamicChildren] = useState([]);
100

101
  // Load dynamic children when parent is expanded
102
  const loadChildren = () => {
103
    setDynamicChildren([
104
      { key: "dynamic1", value: "dynamic1", title: "Dynamic Child 1" },
105
      { key: "dynamic2", value: "dynamic2", title: "Dynamic Child 2" },
106
    ]);
107
  };
108

109
  return (
110
    <TreeSelect
111
      style={{ width: 300 }}
112
      value={value}
113
      onChange={setValue}
114
    >
115
      <TreeNode value="static" title="Static Parent">
116
        <TreeNode value="static-child" title="Static Child" />
117
      </TreeNode>
118
      <TreeNode 
119
        value="dynamic-parent" 
120
        title="Dynamic Parent"
121
        onExpand={loadChildren}
122
      >
123
        {dynamicChildren.map(child => (
124
          <TreeNode 
125
            key={child.key}
126
            value={child.value} 
127
            title={child.title} 
128
          />
129
        ))}
130
      </TreeNode>
131
    </TreeSelect>
132
  );
133
}
134
```
135

136
## TreeNode vs treeData
137

138
The TreeNode component provides an alternative to the `treeData` prop approach:
139

140
### TreeNode Advantages:
141
- Declarative JSX syntax
142
- Easy to read and maintain for static structures
143
- Natural component composition
144
- IDE support for JSX
145

146
### TreeData Advantages:
147
- Dynamic data structures
148
- Better performance with large datasets
149
- Easier to work with APIs
150
- More flexible for programmatic manipulation
151

152
**Comparison Example:**
153

154
```typescript
155
// Using TreeNode (declarative)
156
<TreeSelect>
157
  <TreeNode value="folder1" title="Folder 1">
158
    <TreeNode value="file1" title="File 1.txt" />
159
    <TreeNode value="file2" title="File 2.txt" />
160
  </TreeNode>
161
</TreeSelect>
162

163
// Using treeData (data-driven) 
164
<TreeSelect
165
  treeData={[
166
    {
167
      value: "folder1",
168
      title: "Folder 1", 
169
      children: [
170
        { value: "file1", title: "File 1.txt" },
171
        { value: "file2", title: "File 2.txt" },
172
      ]
173
    }
174
  ]}
175
/>
176
```
177

178
## Types
179

180
```typescript { .api }
181
// Key type for tree node values
182
type Key = string | number | null;
183

184
// Base data node interface that TreeNode extends
185
interface DataNode extends Record<string, any> {
186
  key?: Key;
187
  value?: SafeKey;
188
  title?: React.ReactNode;
189
  children?: DataNode[];
190
  disabled?: boolean;
191
  disableCheckbox?: boolean;
192
  checkable?: boolean;
193
  isLeaf?: boolean;
194
  icon?: React.ReactNode;
195
  className?: string;
196
  style?: React.CSSProperties;
197
}
198
```