Ant Design Tree 树形控件入门实战从 basic 示例掌握展开、选中、勾选与禁用【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/antde/ant-design本指南以 Ant Designantd仓库中 Tree 组件基本用法示例 为核心系统讲解树形控件最常用的一组能力多选、复选框勾选、节点禁用、默认展开/选中/勾选状态以及展开、选择、勾选三类事件的回调签名。文章同时结合 Tree 组件源码 与 组件 API 文档帮助你不仅会用还能理解其底层实现读完即可在自己的 React 项目中搭建出可交互的树形结构。示例概览一个示例覆盖四大核心交互components/tree/demo/basic.md是 Tree 组件最简单、最完整的入门示例。它在一个 Demo 组件中同时演示了 Tree 的四个核心能力可勾选checkable每个节点前出现复选框支持父子级联勾选可多选multiple支持同时选中多个节点禁用disabled / disableCheckbox整节点禁用与仅禁用复选框两种粒度默认状态defaultExpandedKeys / defaultSelectedKeys / defaultCheckedKeys通过 key 数组预先指定展开、选中、勾选的节点。示例完整代码如下原样取自 components/tree/demo/basic.mdimport { Tree } from antd; const TreeNode Tree.TreeNode; const Demo React.createClass({ getDefaultProps() { return { keys: [0-0-0, 0-0-1], }; }, getInitialState() { const keys this.props.keys; return { defaultExpandedKeys: keys, defaultSelectedKeys: keys, defaultCheckedKeys: keys, }; }, onExpand(treeNode, expand, expandedKeys) { console.log(onExpand, expand, expandedKeys); }, onSelect(info) { console.log(selected, info); }, onCheck(info) { console.log(onCheck, info); }, render() { return ( Tree classNamemyCls showLine multiple checkable defaultExpandedKeys{this.state.defaultExpandedKeys} onExpand{this.onExpand} defaultSelectedKeys{this.state.defaultSelectedKeys} defaultCheckedKeys{this.state.defaultCheckedKeys} onSelect{this.onSelect} onCheck{this.onCheck} TreeNode titleparent 1 key0-0 TreeNode titleparent 1-0 key0-0-0 disabled TreeNode titleleaf key0-0-0-0 disableCheckbox / TreeNode titleleaf key0-0-0-1 / /TreeNode TreeNode titleparent 1-1 key0-0-1 TreeNode title{span style{{ color: #08c }}sss/span} key0-0-1-0 / /TreeNode /TreeNode /Tree ); }, }); ReactDOM.render(Demo /, mountNode);组件结构与使用方式Tree TreeNode从示例可以看出antd 的树形结构由两个部分组合而成Tree树的容器负责整体的交互配置勾选、多选、连线、事件等TreeNode树节点通过 JSX 嵌套递归表达层级关系key是节点在树范围内的唯一标识。TreeNode从Tree上挂载导出因此写法为const TreeNode Tree.TreeNode;。这一点可以从 components/tree/index.jsx 的源码末尾得到印证AntTree.TreeNode Tree.TreeNode;该文件同时揭示了 antd Tree 的实现本质——它是在rc-tree基础上封装的 React 组件package.json中声明依赖rc-tree: ~1.1.0import React from react; import Tree from rc-tree; import animation from ../common/openAnimation; const AntTree React.createClass({ getDefaultProps() { return { prefixCls: ant-tree, checkable: false, showIcon: false, openAnimation: animation, }; }, render() { const props this.props; let checkable props.checkable; if (checkable) { checkable span className{${props.prefixCls}-checkbox-inner}/span; } return ( Tree {...props} checkable{checkable} {this.props.children} /Tree ); } });从源码结构可以看出三个关键实现事实默认值约定antd 层默认checkable: false、showIcon: falseprefixCls固定为ant-tree这正是样式文件 style/components/tree.less 中tree-prefix-cls: ant-tree所对应的类名前缀checkable 的渲染当checkable为真时组件会把它替换为一个span classant-tree-checkbox-inner元素再透传给rc-tree也就是说 antd 复用了 checkbox 的视觉样式tree.less中通过antCheckboxFn(checkbox-prefix-cls: ant-tree-checkbox)引入 checkbox 混入勾选框的外观与 antd Checkbox 保持统一展开动画默认接入components/common/openAnimation.js提供的动画示例中如需关闭动画可在draggable场景下传openAnimation{{}}参见 拖拽示例。节点状态默认展开、默认选中、默认勾选示例中通过getDefaultProps定义了一组 keysgetDefaultProps() { return { keys: [0-0-0, 0-0-1], }; }然后在getInitialState中把同一组 keys 同时赋给三种默认状态属性getInitialState() { const keys this.props.keys; return { defaultExpandedKeys: keys, defaultSelectedKeys: keys, defaultCheckedKeys: keys, }; }defaultExpandedKeys默认展开0-0-0parent 1-0与0-0-1parent 1-1两个节点defaultSelectedKeys默认选中这两个节点defaultCheckedKeys默认勾选这两个节点的复选框。注意这里三个属性共用同一组 key实际使用中三者互不约束可按需分别指定。所有以default开头的属性都只作用于首次渲染后续不再跟随 state 变化如果需要受控管理状态应改用expandedKeys/selectedKeys/checkedKeys配合对应事件手动更新具体可参考 受控操作示例。key 的唯一性要求key是节点被各种(default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys属性引用的依据。API 文档特别强调整个树范围内所有节点的 key 值不能重复参见 components/tree/index.md 的 TreeNode props 表。示例中的 key 采用0-0、0-0-0、0-0-0-0这种由父子路径拼接的层级编号既保证唯一又直观表达了树的深度。交互事件onExpand / onSelect / onCheck示例为树的三个核心交互都注册了回调并在控制台输出参数便于观察事件结构事件示例中的回调回调签名见 API 文档展开/收起节点onExpand(treeNode, expand, expandedKeys)function(node, expanded, expandedKeys)expanded表示本次是展开还是收起expandedKeys为当前全部展开节点 key 数组点击树节点onSelect(info)function(selectedKeys, e:{selected: bool, selectedNodes, node, event})selectedKeys为选中节点 key 数组e.selected标记本次是选中还是取消选中点击复选框onCheck(info)function(checkedKeys, e:{checked: bool, checkedNodes, node, event})checkedKeys为勾选节点 key 数组e.checked标记勾选状态受控场景下onExpand/onSelect/onCheck的回调返回值正是更新对应xxxKeysstate 的数据源。以 受控操作示例 中的onExpand为例其核心逻辑就是根据expand布尔值与treeNode.props.eventKey增删展开 key 数组后setStateonExpand(treeNode, expand, expandedKeys) { const index expandedKeys.indexOf(treeNode.props.eventKey); if (expand) { if (index -1) { expandedKeys.splice(index, 1); } } else { if (index -1) { expandedKeys.push(treeNode.props.eventKey); } } this.setState({ expandedKeys }); }值得注意的是事件回调中拿到的节点对象带有props.eventKey即该节点当前的 key异步加载、拖拽等高级场景都依赖这个字段定位节点参见 异步数据加载示例 与 拖拽示例。节点级禁用disabled 与 disableCheckbox示例在树节点上演示了两种禁用粒度TreeNode titleparent 1-0 key0-0-0 disabled TreeNode titleleaf key0-0-0-0 disableCheckbox /disabled作用于0-0-0节点整个节点不可选中、不可勾选、不可展开并失去点击响应。从 style/components/tree.less 的样式可以看出禁用节点会有独立的视觉呈现-treenode-disabled { span, a, a span { color: #ccc; cursor: not-allowed; } }disableCheckbox作用于0-0-0-0叶子节点仅禁用复选框节点本身仍可被选中、展开。注意该子节点位于被禁用的父节点之下这恰好说明两个属性是独立的disableCheckbox只影响勾选交互不影响其他操作。视觉与展示细节showLine、JSX title 与节点图标showLineTree showLine ...开启树的连接线模式父节点与子节点之间以树状线条相连层级关系更直观。tree.less中通过ant-tree-child-tree的展开/收起类控制子树的显示与隐藏-child-tree { display: none; -open { display: block; } }title 支持任意 ReactNode示例中最内层的节点title直接传入了 JSXTreeNode title{span style{{ color: #08c }}sss/span} key0-0-1-0 /说明title不限于字符串可以是任意 React 元素这为在节点上渲染图标、徽标、富文本等定制内容提供了入口。示例通过行内样式将 sss 渲染为品牌蓝#08c。节点图标与开关index.jsx的默认值显示 antd 层默认showIcon: false即不显示自定义图标展开/收起开关switcher的箭头样式由tree.less中的antTreeSwitcherIcon混入定义展开态使用\e611图标收起态通过旋转270deg呈现箭头翻转效果并带有transition: transform .3s ease的过渡动画。完整 API 速查Tree props 与 TreeNode props以下两张参数表完整继承自 components/tree/index.md是使用 Tree 组件时的权威参考。Tree props参数说明类型默认值multiple是否支持多选boolfalsecheckable是否支持选中boolfalsedefaultExpandAll默认展开所有树节点boolfalsedefaultExpandedKeys默认展开指定的树节点String[][]expandedKeys受控展开指定的树节点String[][]checkedKeys受控选中复选框的树节点String[][]defaultCheckedKeys默认选中复选框的树节点String[][]selectedKeys受控设置选中的树节点String[]-defaultSelectedKeys默认选中的树节点String[][]onExpand展开/收起节点时触发function(node, expanded, expandedKeys)-onCheck点击复选框触发function(checkedKeys, e:{checked: bool, checkedNodes, node, event})-onSelect点击树节点触发function(selectedKeys, e:{selected: bool, selectedNodes, node, event})-filterTreeNodefilter some treeNodes as you need. it should return truefunction(node)-loadData异步加载数据function(node)-onRightClick响应右键点击function({event,node})-draggable设置节点可拖拽IE8boolfalseonDragStart开始拖拽时调用function({event,node})-onDragEnterdragenter 触发时调用function({event,node,expandedKeys})-onDragOverdragover 触发时调用function({event,node})-onDragLeavedragleave 触发时调用function({event,node})-onDropdrop 触发时调用function({event, node, dragNode, dragNodesKeys})-TreeNode props参数说明类型默认值disabled禁掉响应boolfalsedisableCheckbox禁掉 checkboxboolfalsetitle标题String---key被树的 (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys 属性所用。注意整个树范围内的所有节点的 key 值不能重复String内部计算出的节点位置isLeaf设置为叶子节点boolfalse进阶方向从基本示例出发掌握基本示例后仓库内还提供了同主题的进阶示例可继续深入受控操作示例通过expandedKeys/checkedKeys/selectedKeys与事件回调实现完全受控的树拖拽示例draggable配合onDrop/onDragEnter实现节点拖拽重排演示了如何通过info.dropToGap判断拖入节点内部还是前后间隙异步数据加载示例loadData返回 Promise点击展开节点时动态拉取子节点并配合isLeaf标记叶子节点TreeSelect 组件基于 Tree 的选择器API 中value/onChange的使用方式可参考 基本用法示例。小结components/tree/demo/basic.md虽然名为基本却完整串联了 Tree 组件最核心的交互闭环用default*Keys三件套初始化状态、用multiple/checkable/showLine定义交互形态、用disabled/disableCheckbox控制可用性、用onExpand/onSelect/onCheck接收用户操作。配合本文对 index.jsxrc-tree 封装层与 tree.less样式实现的源码剖析你已经具备了在项目中独立使用并二次定制 Tree 组件的完整知识基础。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/antde/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Ant Design Tree 树形控件入门实战：从 basic 示例掌握展开、选中、勾选与禁用
Ant Design Tree 树形控件入门实战从 basic 示例掌握展开、选中、勾选与禁用【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/antde/ant-design本指南以 Ant Designantd仓库中 Tree 组件基本用法示例 为核心系统讲解树形控件最常用的一组能力多选、复选框勾选、节点禁用、默认展开/选中/勾选状态以及展开、选择、勾选三类事件的回调签名。文章同时结合 Tree 组件源码 与 组件 API 文档帮助你不仅会用还能理解其底层实现读完即可在自己的 React 项目中搭建出可交互的树形结构。示例概览一个示例覆盖四大核心交互components/tree/demo/basic.md是 Tree 组件最简单、最完整的入门示例。它在一个 Demo 组件中同时演示了 Tree 的四个核心能力可勾选checkable每个节点前出现复选框支持父子级联勾选可多选multiple支持同时选中多个节点禁用disabled / disableCheckbox整节点禁用与仅禁用复选框两种粒度默认状态defaultExpandedKeys / defaultSelectedKeys / defaultCheckedKeys通过 key 数组预先指定展开、选中、勾选的节点。示例完整代码如下原样取自 components/tree/demo/basic.mdimport { Tree } from antd; const TreeNode Tree.TreeNode; const Demo React.createClass({ getDefaultProps() { return { keys: [0-0-0, 0-0-1], }; }, getInitialState() { const keys this.props.keys; return { defaultExpandedKeys: keys, defaultSelectedKeys: keys, defaultCheckedKeys: keys, }; }, onExpand(treeNode, expand, expandedKeys) { console.log(onExpand, expand, expandedKeys); }, onSelect(info) { console.log(selected, info); }, onCheck(info) { console.log(onCheck, info); }, render() { return ( Tree classNamemyCls showLine multiple checkable defaultExpandedKeys{this.state.defaultExpandedKeys} onExpand{this.onExpand} defaultSelectedKeys{this.state.defaultSelectedKeys} defaultCheckedKeys{this.state.defaultCheckedKeys} onSelect{this.onSelect} onCheck{this.onCheck} TreeNode titleparent 1 key0-0 TreeNode titleparent 1-0 key0-0-0 disabled TreeNode titleleaf key0-0-0-0 disableCheckbox / TreeNode titleleaf key0-0-0-1 / /TreeNode TreeNode titleparent 1-1 key0-0-1 TreeNode title{span style{{ color: #08c }}sss/span} key0-0-1-0 / /TreeNode /TreeNode /Tree ); }, }); ReactDOM.render(Demo /, mountNode);组件结构与使用方式Tree TreeNode从示例可以看出antd 的树形结构由两个部分组合而成Tree树的容器负责整体的交互配置勾选、多选、连线、事件等TreeNode树节点通过 JSX 嵌套递归表达层级关系key是节点在树范围内的唯一标识。TreeNode从Tree上挂载导出因此写法为const TreeNode Tree.TreeNode;。这一点可以从 components/tree/index.jsx 的源码末尾得到印证AntTree.TreeNode Tree.TreeNode;该文件同时揭示了 antd Tree 的实现本质——它是在rc-tree基础上封装的 React 组件package.json中声明依赖rc-tree: ~1.1.0import React from react; import Tree from rc-tree; import animation from ../common/openAnimation; const AntTree React.createClass({ getDefaultProps() { return { prefixCls: ant-tree, checkable: false, showIcon: false, openAnimation: animation, }; }, render() { const props this.props; let checkable props.checkable; if (checkable) { checkable span className{${props.prefixCls}-checkbox-inner}/span; } return ( Tree {...props} checkable{checkable} {this.props.children} /Tree ); } });从源码结构可以看出三个关键实现事实默认值约定antd 层默认checkable: false、showIcon: falseprefixCls固定为ant-tree这正是样式文件 style/components/tree.less 中tree-prefix-cls: ant-tree所对应的类名前缀checkable 的渲染当checkable为真时组件会把它替换为一个span classant-tree-checkbox-inner元素再透传给rc-tree也就是说 antd 复用了 checkbox 的视觉样式tree.less中通过antCheckboxFn(checkbox-prefix-cls: ant-tree-checkbox)引入 checkbox 混入勾选框的外观与 antd Checkbox 保持统一展开动画默认接入components/common/openAnimation.js提供的动画示例中如需关闭动画可在draggable场景下传openAnimation{{}}参见 拖拽示例。节点状态默认展开、默认选中、默认勾选示例中通过getDefaultProps定义了一组 keysgetDefaultProps() { return { keys: [0-0-0, 0-0-1], }; }然后在getInitialState中把同一组 keys 同时赋给三种默认状态属性getInitialState() { const keys this.props.keys; return { defaultExpandedKeys: keys, defaultSelectedKeys: keys, defaultCheckedKeys: keys, }; }defaultExpandedKeys默认展开0-0-0parent 1-0与0-0-1parent 1-1两个节点defaultSelectedKeys默认选中这两个节点defaultCheckedKeys默认勾选这两个节点的复选框。注意这里三个属性共用同一组 key实际使用中三者互不约束可按需分别指定。所有以default开头的属性都只作用于首次渲染后续不再跟随 state 变化如果需要受控管理状态应改用expandedKeys/selectedKeys/checkedKeys配合对应事件手动更新具体可参考 受控操作示例。key 的唯一性要求key是节点被各种(default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys属性引用的依据。API 文档特别强调整个树范围内所有节点的 key 值不能重复参见 components/tree/index.md 的 TreeNode props 表。示例中的 key 采用0-0、0-0-0、0-0-0-0这种由父子路径拼接的层级编号既保证唯一又直观表达了树的深度。交互事件onExpand / onSelect / onCheck示例为树的三个核心交互都注册了回调并在控制台输出参数便于观察事件结构事件示例中的回调回调签名见 API 文档展开/收起节点onExpand(treeNode, expand, expandedKeys)function(node, expanded, expandedKeys)expanded表示本次是展开还是收起expandedKeys为当前全部展开节点 key 数组点击树节点onSelect(info)function(selectedKeys, e:{selected: bool, selectedNodes, node, event})selectedKeys为选中节点 key 数组e.selected标记本次是选中还是取消选中点击复选框onCheck(info)function(checkedKeys, e:{checked: bool, checkedNodes, node, event})checkedKeys为勾选节点 key 数组e.checked标记勾选状态受控场景下onExpand/onSelect/onCheck的回调返回值正是更新对应xxxKeysstate 的数据源。以 受控操作示例 中的onExpand为例其核心逻辑就是根据expand布尔值与treeNode.props.eventKey增删展开 key 数组后setStateonExpand(treeNode, expand, expandedKeys) { const index expandedKeys.indexOf(treeNode.props.eventKey); if (expand) { if (index -1) { expandedKeys.splice(index, 1); } } else { if (index -1) { expandedKeys.push(treeNode.props.eventKey); } } this.setState({ expandedKeys }); }值得注意的是事件回调中拿到的节点对象带有props.eventKey即该节点当前的 key异步加载、拖拽等高级场景都依赖这个字段定位节点参见 异步数据加载示例 与 拖拽示例。节点级禁用disabled 与 disableCheckbox示例在树节点上演示了两种禁用粒度TreeNode titleparent 1-0 key0-0-0 disabled TreeNode titleleaf key0-0-0-0 disableCheckbox /disabled作用于0-0-0节点整个节点不可选中、不可勾选、不可展开并失去点击响应。从 style/components/tree.less 的样式可以看出禁用节点会有独立的视觉呈现-treenode-disabled { span, a, a span { color: #ccc; cursor: not-allowed; } }disableCheckbox作用于0-0-0-0叶子节点仅禁用复选框节点本身仍可被选中、展开。注意该子节点位于被禁用的父节点之下这恰好说明两个属性是独立的disableCheckbox只影响勾选交互不影响其他操作。视觉与展示细节showLine、JSX title 与节点图标showLineTree showLine ...开启树的连接线模式父节点与子节点之间以树状线条相连层级关系更直观。tree.less中通过ant-tree-child-tree的展开/收起类控制子树的显示与隐藏-child-tree { display: none; -open { display: block; } }title 支持任意 ReactNode示例中最内层的节点title直接传入了 JSXTreeNode title{span style{{ color: #08c }}sss/span} key0-0-1-0 /说明title不限于字符串可以是任意 React 元素这为在节点上渲染图标、徽标、富文本等定制内容提供了入口。示例通过行内样式将 sss 渲染为品牌蓝#08c。节点图标与开关index.jsx的默认值显示 antd 层默认showIcon: false即不显示自定义图标展开/收起开关switcher的箭头样式由tree.less中的antTreeSwitcherIcon混入定义展开态使用\e611图标收起态通过旋转270deg呈现箭头翻转效果并带有transition: transform .3s ease的过渡动画。完整 API 速查Tree props 与 TreeNode props以下两张参数表完整继承自 components/tree/index.md是使用 Tree 组件时的权威参考。Tree props参数说明类型默认值multiple是否支持多选boolfalsecheckable是否支持选中boolfalsedefaultExpandAll默认展开所有树节点boolfalsedefaultExpandedKeys默认展开指定的树节点String[][]expandedKeys受控展开指定的树节点String[][]checkedKeys受控选中复选框的树节点String[][]defaultCheckedKeys默认选中复选框的树节点String[][]selectedKeys受控设置选中的树节点String[]-defaultSelectedKeys默认选中的树节点String[][]onExpand展开/收起节点时触发function(node, expanded, expandedKeys)-onCheck点击复选框触发function(checkedKeys, e:{checked: bool, checkedNodes, node, event})-onSelect点击树节点触发function(selectedKeys, e:{selected: bool, selectedNodes, node, event})-filterTreeNodefilter some treeNodes as you need. it should return truefunction(node)-loadData异步加载数据function(node)-onRightClick响应右键点击function({event,node})-draggable设置节点可拖拽IE8boolfalseonDragStart开始拖拽时调用function({event,node})-onDragEnterdragenter 触发时调用function({event,node,expandedKeys})-onDragOverdragover 触发时调用function({event,node})-onDragLeavedragleave 触发时调用function({event,node})-onDropdrop 触发时调用function({event, node, dragNode, dragNodesKeys})-TreeNode props参数说明类型默认值disabled禁掉响应boolfalsedisableCheckbox禁掉 checkboxboolfalsetitle标题String---key被树的 (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys 属性所用。注意整个树范围内的所有节点的 key 值不能重复String内部计算出的节点位置isLeaf设置为叶子节点boolfalse进阶方向从基本示例出发掌握基本示例后仓库内还提供了同主题的进阶示例可继续深入受控操作示例通过expandedKeys/checkedKeys/selectedKeys与事件回调实现完全受控的树拖拽示例draggable配合onDrop/onDragEnter实现节点拖拽重排演示了如何通过info.dropToGap判断拖入节点内部还是前后间隙异步数据加载示例loadData返回 Promise点击展开节点时动态拉取子节点并配合isLeaf标记叶子节点TreeSelect 组件基于 Tree 的选择器API 中value/onChange的使用方式可参考 基本用法示例。小结components/tree/demo/basic.md虽然名为基本却完整串联了 Tree 组件最核心的交互闭环用default*Keys三件套初始化状态、用multiple/checkable/showLine定义交互形态、用disabled/disableCheckbox控制可用性、用onExpand/onSelect/onCheck接收用户操作。配合本文对 index.jsxrc-tree 封装层与 tree.less样式实现的源码剖析你已经具备了在项目中独立使用并二次定制 Tree 组件的完整知识基础。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/antde/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考