cpn-basic-tree

Integrate and use the UDesign Tree component in React projects with documented API props and usage guidelines.

1|Updated Apr 14, 2026

Search Tags:#ui #documentation #react #component #tree #udesign

Ready to run

npx skills add https://github.com/UCloud-FE/udesign-cli --skill cpn-basic-tree

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: cpn-basic-tree
Source: https://github.com/UCloud-FE/udesign-cli/tree/main/skills/cpn-basic-tree
Command: npx skills add https://github.com/UCloud-FE/udesign-cli --skill cpn-basic-tree

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill guides AI to correctly use the UDesign Tree component. It clarifies that Tree nodes have distinct roles: parent nodes are for display and do not represent selectable items, while child nodes are the actual selectable items.

Core Features & Use Cases

Guidance on importing the Tree component and creating a sample dataSource for demonstration.
Documentation of API props: dataSource, disabled, multiple, selectedKeys, defaultSelectedKeys, onChange, loadData, collapseProps, search.
Examples including controlled vs. uncontrolled usage, asynchronous loading via loadData, search functionality, and performance considerations for large data.

Quick Start

Follow the basic usage example to render a Tree with a sample dataSource and interact with selection, search, and dynamic loading as demonstrated.

Frequently Asked Questions about cpn-basic-tree

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I render hierarchical data in a React tree component?▼

To render hierarchical data in a React tree component, import the UDesign Tree and define a structured dataSource where parent nodes manage display and child nodes act as selectable items.

Can I load tree child nodes asynchronously using isParent hints?▼

Yes, you can load tree nodes asynchronously by implementing the loadData prop. Use the isParent hint within your dataSource to dynamically fetch and append child nodes upon expansion.

How do I enable multiple selection in a React tree component?▼

You enable multiple selection in a React tree component by setting the multiple prop to true. Control the selected items using the selectedKeys and onChange props to capture user interactions.

Does the UDesign Tree component support built-in search functionality?▼

Yes, the UDesign Tree component supports built-in search functionality. You implement this by configuring the search prop to filter and highlight matching hierarchical nodes within the dataSource.

What are the limitations when using the UDesign Tree component?▼

Limitations of the UDesign Tree component include a strict requirement to avoid TypeScript and limit external dependencies. You must also follow the documented API props to handle large data performance constraints correctly.

What is the difference between controlled and uncontrolled tree selection?▼

Controlled tree selection uses selectedKeys and onChange to explicitly manage state, whereas uncontrolled selection relies on defaultSelectedKeys to let the component maintain its own internal selection state.