https://github.com/react-widget/tree-basic
https://react-widget.github.io/tree-basic/
https://github.com/react-widget/tree-basic
react-tree react-widget tree-basic
Last synced: 4 months ago
JSON representation
https://react-widget.github.io/tree-basic/
- Host: GitHub
- URL: https://github.com/react-widget/tree-basic
- Owner: react-widget
- License: mit
- Created: 2020-06-10T08:56:46.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-06-24T13:26:59.000Z (over 5 years ago)
- Last Synced: 2025-02-14T03:17:52.147Z (12 months ago)
- Topics: react-tree, react-widget, tree-basic
- Language: TypeScript
- Homepage:
- Size: 263 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-widget-tree-basic
Tree基础组件
## 安装
```
npm install --save react-widget-tree-basic
```
## 使用
[](https://codesandbox.io/s/react-widget-tree-basic-bsqjd?fontsize=14&hidenavigation=1&theme=dark)
```js
import TreeBasic from 'react-widget-tree-basic';
export default () =>
```
### Interfaces
```ts
export interface TreeBasicProps {
/** 样式前缀 */
prefixCls: string;
/** 样式名称 */
className?: string;
/** 样式属性 */
style?: React.CSSProperties;
/** 树根节点ID */
rootId: string | number | null;
/** tree 数据结构 id 属性名称 */
idField: string;
/** tree 数据结构 leaf 属性名称 */
leafField: string;
/** tree 数据结构 parent 属性名称 */
pidField: string;
/** 最大展开层级限制没，默认：99 */
maxDepth: number;
/** 异步检测耗时机制，超过该时长即认定为异步加载，默认：16 ms */
asyncTestDelay: number;
/** 已展开的节点ID */
expandedIds: (string | number)[];
/** Tree数据加载器，必填 */
loadData: (data: T, node: Node) => T[] | Promise;
/** 自定义TreeNode的render返回 */
nodeRender?: (props: nodeRenderProps, item: React.ReactNode, children: React.ReactNode) => React.ReactNode;
/** 自定义TreeItem的render返回，必填 */
itemRender: (props: itemRenderProps) => React.ReactNode;
/** 自定义TreeNode的子节点渲染，一般动画需要使用。*/
childrenRender: (props: childrenRenderProps) => React.ReactNode;
/** 异步加载时的加载内容返回，默认为：null */
loadRender?: (props: LoadRenderProps) => React.ReactNode;
/** 自定义Tree容器组件*/
rootComponent: React.ElementType;
}
export declare type renderProps = Omit, "render" | "childrenRender">;
export interface TreeNodeProps {
node: Node;
isRoot: boolean;
render?: (props: renderProps, nodeItem: React.ReactNode, children: React.ReactNode) => React.ReactNode;
}
export interface TreeNodeProps {
node: Node;
isRoot: boolean;
render?: (
props: renderProps,
nodeItem: React.ReactNode,
children: React.ReactNode
) => React.ReactNode;
}
export interface childrenRenderProps {
getChildren: () => React.ReactNode;
expanded: boolean;
loading: boolean;
root: boolean;
node: Node;
data: T;
}
export interface itemRenderProps {
expanded: boolean;
loading: boolean;
leaf: boolean;
node: Node;
data: T;
}
export declare function toMarked(array: any[]): any;
export declare type DataType = Record;
export declare type IdType = string | number;
export declare type nodeRenderProps = renderProps;
export interface LoadRenderProps {
root: boolean;
node: Node;
data: T;
}
```
### defaultProps
```js
{
prefixCls: "rw-tree",
rootId: null,
idField: "id",
leafField: "leaf",
pidField: "pid",
maxDepth: 99,
asyncTestDelay: 16,
expandedIds: [],
childrenRender(props) {
if (!props.expanded) return null;
return props.getChildren();
},
rootComponent: "div",
}
```