Tree树形控件

多层次的结构列表。

何时使用

文件夹、组织架构、生物分类、国家地区等等,世间万物的大多数结构都是树形结构。使用 树控件 可以完整展现其中的层级关系,并具有展开收起选择等交互功能。

代码演示

Tree树形控件 - 图1

基本

最简单的用法,展示可勾选,可选中,禁用,默认展开等功能。

TypeScript

JavaScript

  1. import { Tree } from 'antd';
  2. const { TreeNode } = Tree;
  3. const treeData = [
  4. {
  5. title: 'parent 1',
  6. key: '0-0',
  7. children: [
  8. {
  9. title: 'parent 1-0',
  10. key: '0-0-0',
  11. disabled: true,
  12. children: [
  13. {
  14. title: 'leaf',
  15. key: '0-0-0-0',
  16. disableCheckbox: true,
  17. },
  18. {
  19. title: 'leaf',
  20. key: '0-0-0-1',
  21. },
  22. ],
  23. },
  24. {
  25. title: 'parent 1-1',
  26. key: '0-0-1',
  27. children: [{ title: <span style={{ color: '#1890ff' }}>sss</span>, key: '0-0-1-0' }],
  28. },
  29. ],
  30. },
  31. ];
  32. const Demo = () => {
  33. const onSelect = (selectedKeys, info) => {
  34. console.log('selected', selectedKeys, info);
  35. };
  36. const onCheck = (checkedKeys, info) => {
  37. console.log('onCheck', checkedKeys, info);
  38. };
  39. return (
  40. <Tree
  41. checkable
  42. defaultExpandedKeys={['0-0-0', '0-0-1']}
  43. defaultSelectedKeys={['0-0-0', '0-0-1']}
  44. defaultCheckedKeys={['0-0-0', '0-0-1']}
  45. onSelect={onSelect}
  46. onCheck={onCheck}
  47. treeData={treeData}
  48. />
  49. );
  50. };
  51. ReactDOM.render(<Demo />, mountNode);

Tree树形控件 - 图2

拖动示例

将节点拖拽到其他节点内部或前后。

  1. import { Tree } from 'antd';
  2. const x = 3;
  3. const y = 2;
  4. const z = 1;
  5. const gData = [];
  6. const generateData = (_level, _preKey, _tns) => {
  7. const preKey = _preKey || '0';
  8. const tns = _tns || gData;
  9. const children = [];
  10. for (let i = 0; i < x; i++) {
  11. const key = `${preKey}-${i}`;
  12. tns.push({ title: key, key });
  13. if (i < y) {
  14. children.push(key);
  15. }
  16. }
  17. if (_level < 0) {
  18. return tns;
  19. }
  20. const level = _level - 1;
  21. children.forEach((key, index) => {
  22. tns[index].children = [];
  23. return generateData(level, key, tns[index].children);
  24. });
  25. };
  26. generateData(z);
  27. class Demo extends React.Component {
  28. state = {
  29. gData,
  30. expandedKeys: ['0-0', '0-0-0', '0-0-0-0'],
  31. };
  32. onDragEnter = info => {
  33. console.log(info);
  34. // expandedKeys 需要受控时设置
  35. // this.setState({
  36. // expandedKeys: info.expandedKeys,
  37. // });
  38. };
  39. onDrop = info => {
  40. console.log(info);
  41. const dropKey = info.node.props.eventKey;
  42. const dragKey = info.dragNode.props.eventKey;
  43. const dropPos = info.node.props.pos.split('-');
  44. const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
  45. const loop = (data, key, callback) => {
  46. data.forEach((item, index, arr) => {
  47. if (item.key === key) {
  48. return callback(item, index, arr);
  49. }
  50. if (item.children) {
  51. return loop(item.children, key, callback);
  52. }
  53. });
  54. };
  55. const data = [...this.state.gData];
  56. // Find dragObject
  57. let dragObj;
  58. loop(data, dragKey, (item, index, arr) => {
  59. arr.splice(index, 1);
  60. dragObj = item;
  61. });
  62. if (!info.dropToGap) {
  63. // Drop on the content
  64. loop(data, dropKey, item => {
  65. item.children = item.children || [];
  66. // where to insert 示例添加到尾部,可以是随意位置
  67. item.children.push(dragObj);
  68. });
  69. } else if (
  70. (info.node.props.children || []).length > 0 && // Has children
  71. info.node.props.expanded && // Is expanded
  72. dropPosition === 1 // On the bottom gap
  73. ) {
  74. loop(data, dropKey, item => {
  75. item.children = item.children || [];
  76. // where to insert 示例添加到头部,可以是随意位置
  77. item.children.unshift(dragObj);
  78. });
  79. } else {
  80. let ar;
  81. let i;
  82. loop(data, dropKey, (item, index, arr) => {
  83. ar = arr;
  84. i = index;
  85. });
  86. if (dropPosition === -1) {
  87. ar.splice(i, 0, dragObj);
  88. } else {
  89. ar.splice(i + 1, 0, dragObj);
  90. }
  91. }
  92. this.setState({
  93. gData: data,
  94. });
  95. };
  96. render() {
  97. return (
  98. <Tree
  99. className="draggable-tree"
  100. defaultExpandedKeys={this.state.expandedKeys}
  101. draggable
  102. blockNode
  103. onDragEnter={this.onDragEnter}
  104. onDrop={this.onDrop}
  105. treeData={this.state.gData}
  106. />
  107. );
  108. }
  109. }
  110. ReactDOM.render(<Demo />, mountNode);

Tree树形控件 - 图3

可搜索

可搜索的树。

  1. import { Tree, Input } from 'antd';
  2. const { Search } = Input;
  3. const x = 3;
  4. const y = 2;
  5. const z = 1;
  6. const gData = [];
  7. const generateData = (_level, _preKey, _tns) => {
  8. const preKey = _preKey || '0';
  9. const tns = _tns || gData;
  10. const children = [];
  11. for (let i = 0; i < x; i++) {
  12. const key = `${preKey}-${i}`;
  13. tns.push({ title: key, key });
  14. if (i < y) {
  15. children.push(key);
  16. }
  17. }
  18. if (_level < 0) {
  19. return tns;
  20. }
  21. const level = _level - 1;
  22. children.forEach((key, index) => {
  23. tns[index].children = [];
  24. return generateData(level, key, tns[index].children);
  25. });
  26. };
  27. generateData(z);
  28. const dataList = [];
  29. const generateList = data => {
  30. for (let i = 0; i < data.length; i++) {
  31. const node = data[i];
  32. const { key } = node;
  33. dataList.push({ key, title: key });
  34. if (node.children) {
  35. generateList(node.children);
  36. }
  37. }
  38. };
  39. generateList(gData);
  40. const getParentKey = (key, tree) => {
  41. let parentKey;
  42. for (let i = 0; i < tree.length; i++) {
  43. const node = tree[i];
  44. if (node.children) {
  45. if (node.children.some(item => item.key === key)) {
  46. parentKey = node.key;
  47. } else if (getParentKey(key, node.children)) {
  48. parentKey = getParentKey(key, node.children);
  49. }
  50. }
  51. }
  52. return parentKey;
  53. };
  54. class SearchTree extends React.Component {
  55. state = {
  56. expandedKeys: [],
  57. searchValue: '',
  58. autoExpandParent: true,
  59. };
  60. onExpand = expandedKeys => {
  61. this.setState({
  62. expandedKeys,
  63. autoExpandParent: false,
  64. });
  65. };
  66. onChange = e => {
  67. const { value } = e.target;
  68. const expandedKeys = dataList
  69. .map(item => {
  70. if (item.title.indexOf(value) > -1) {
  71. return getParentKey(item.key, gData);
  72. }
  73. return null;
  74. })
  75. .filter((item, i, self) => item && self.indexOf(item) === i);
  76. this.setState({
  77. expandedKeys,
  78. searchValue: value,
  79. autoExpandParent: true,
  80. });
  81. };
  82. render() {
  83. const { searchValue, expandedKeys, autoExpandParent } = this.state;
  84. const loop = data =>
  85. data.map(item => {
  86. const index = item.title.indexOf(searchValue);
  87. const beforeStr = item.title.substr(0, index);
  88. const afterStr = item.title.substr(index + searchValue.length);
  89. const title =
  90. index > -1 ? (
  91. <span>
  92. {beforeStr}
  93. <span className="site-tree-search-value">{searchValue}</span>
  94. {afterStr}
  95. </span>
  96. ) : (
  97. <span>{item.title}</span>
  98. );
  99. if (item.children) {
  100. return { title, key: item.key, children: loop(item.children) };
  101. }
  102. return {
  103. title,
  104. key: item.key,
  105. };
  106. });
  107. return (
  108. <div>
  109. <Search style={{ marginBottom: 8 }} placeholder="Search" onChange={this.onChange} />
  110. <Tree
  111. onExpand={this.onExpand}
  112. expandedKeys={expandedKeys}
  113. autoExpandParent={autoExpandParent}
  114. treeData={loop(gData)}
  115. />
  116. </div>
  117. );
  118. }
  119. }
  120. ReactDOM.render(<SearchTree />, mountNode);
  1. .site-tree-search-value {
  2. color: #f50;
  3. }

Tree树形控件 - 图4

自定义图标

可以针对不同的节点定制图标。

  1. import { Tree } from 'antd';
  2. import {
  3. DownOutlined,
  4. FrownOutlined,
  5. SmileOutlined,
  6. MehOutlined,
  7. FrownFilled,
  8. } from '@ant-design/icons';
  9. const treeData = [
  10. {
  11. title: 'parent 1',
  12. key: '0-0',
  13. icon: <SmileOutlined />,
  14. children: [
  15. {
  16. title: 'leaf',
  17. key: '0-0-0',
  18. icon: <MehOutlined />,
  19. },
  20. {
  21. title: 'leaf',
  22. key: '0-0-1',
  23. icon: ({ selected }) => (selected ? <FrownFilled /> : <FrownOutlined />),
  24. },
  25. ],
  26. },
  27. ];
  28. ReactDOM.render(
  29. <Tree
  30. showIcon
  31. defaultExpandAll
  32. defaultSelectedKeys={['0-0-0']}
  33. switcherIcon={<DownOutlined />}
  34. treeData={treeData}
  35. />,
  36. mountNode,
  37. );

Tree树形控件 - 图5

自定义展开/折叠图标

自定义展开/折叠图标。

  1. import { Tree } from 'antd';
  2. import { DownOutlined } from '@ant-design/icons';
  3. const { TreeNode } = Tree;
  4. class Demo extends React.Component {
  5. onSelect = (selectedKeys, info) => {
  6. console.log('selected', selectedKeys, info);
  7. };
  8. render() {
  9. return (
  10. <Tree
  11. showLine
  12. switcherIcon={<DownOutlined />}
  13. defaultExpandedKeys={['0-0-0']}
  14. onSelect={this.onSelect}
  15. >
  16. <TreeNode title="parent 1" key="0-0">
  17. <TreeNode title="parent 1-0" key="0-0-0">
  18. <TreeNode title="leaf" key="0-0-0-0" />
  19. <TreeNode title="leaf" key="0-0-0-1" />
  20. <TreeNode title="leaf" key="0-0-0-2" />
  21. </TreeNode>
  22. <TreeNode title="parent 1-1" key="0-0-1">
  23. <TreeNode title="leaf" key="0-0-1-0" />
  24. </TreeNode>
  25. <TreeNode title="parent 1-2" key="0-0-2">
  26. <TreeNode title="leaf" key="0-0-2-0" />
  27. <TreeNode title="leaf" key="0-0-2-1" />
  28. </TreeNode>
  29. </TreeNode>
  30. </Tree>
  31. );
  32. }
  33. }
  34. ReactDOM.render(<Demo />, mountNode);

Tree树形控件 - 图6

受控操作示例

受控操作示例

TypeScript

JavaScript

  1. import React, { useState } from 'react';
  2. import { Tree } from 'antd';
  3. const { TreeNode } = Tree;
  4. const treeData = [
  5. {
  6. title: '0-0',
  7. key: '0-0',
  8. children: [
  9. {
  10. title: '0-0-0',
  11. key: '0-0-0',
  12. children: [
  13. { title: '0-0-0-0', key: '0-0-0-0' },
  14. { title: '0-0-0-1', key: '0-0-0-1' },
  15. { title: '0-0-0-2', key: '0-0-0-2' },
  16. ],
  17. },
  18. {
  19. title: '0-0-1',
  20. key: '0-0-1',
  21. children: [
  22. { title: '0-0-1-0', key: '0-0-1-0' },
  23. { title: '0-0-1-1', key: '0-0-1-1' },
  24. { title: '0-0-1-2', key: '0-0-1-2' },
  25. ],
  26. },
  27. {
  28. title: '0-0-2',
  29. key: '0-0-2',
  30. },
  31. ],
  32. },
  33. {
  34. title: '0-1',
  35. key: '0-1',
  36. children: [
  37. { title: '0-1-0-0', key: '0-1-0-0' },
  38. { title: '0-1-0-1', key: '0-1-0-1' },
  39. { title: '0-1-0-2', key: '0-1-0-2' },
  40. ],
  41. },
  42. {
  43. title: '0-2',
  44. key: '0-2',
  45. },
  46. ];
  47. const Demo = () => {
  48. const [expandedKeys, setExpandedKeys] = useState<string[]>(['0-0-0', '0-0-1']);
  49. const [checkedKeys, setCheckedKeys] = useState<string[]>(['0-0-0']);
  50. const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
  51. const [autoExpandParent, setAutoExpandParent] = useState<boolean>(true);
  52. const onExpand = expandedKeys => {
  53. console.log('onExpand', expandedKeys);
  54. // if not set autoExpandParent to false, if children expanded, parent can not collapse.
  55. // or, you can remove all expanded children keys.
  56. setExpandedKeys(expandedKeys);
  57. setAutoExpandParent(false);
  58. };
  59. const onCheck = checkedKeys => {
  60. console.log('onCheck', checkedKeys);
  61. setCheckedKeys(checkedKeys);
  62. };
  63. const onSelect = (selectedKeys, info) => {
  64. console.log('onSelect', info);
  65. setSelectedKeys(selectedKeys);
  66. };
  67. return (
  68. <Tree
  69. checkable
  70. onExpand={onExpand}
  71. expandedKeys={expandedKeys}
  72. autoExpandParent={autoExpandParent}
  73. onCheck={onCheck}
  74. checkedKeys={checkedKeys}
  75. onSelect={onSelect}
  76. selectedKeys={selectedKeys}
  77. treeData={treeData}
  78. />
  79. );
  80. };
  81. ReactDOM.render(<Demo />, mountNode);

Tree树形控件 - 图7

异步数据加载

点击展开节点,动态加载数据。

TypeScript

JavaScript

  1. import React, { useState } from 'react';
  2. import { Tree } from 'antd';
  3. const { TreeNode } = Tree;
  4. interface DataNode {
  5. title: string;
  6. key: string;
  7. isLeaf?: boolean;
  8. children?: DataNode[];
  9. }
  10. const initTreeDate: DataNode[] = [
  11. { title: 'Expand to load', key: '0' },
  12. { title: 'Expand to load', key: '1' },
  13. { title: 'Tree Node', key: '2', isLeaf: true },
  14. ];
  15. // It's just a simple demo. You can use tree map to optimize update perf.
  16. function updateTreeData(list: DataNode[], key: React.Key, children: DataNode[]): DataNode[] {
  17. return list.map(node => {
  18. if (node.key === key) {
  19. return {
  20. ...node,
  21. children,
  22. };
  23. } else if (node.children) {
  24. return {
  25. ...node,
  26. children: updateTreeData(node.children, key, children),
  27. };
  28. }
  29. return node;
  30. });
  31. }
  32. const Demo: React.FC<{}> = () => {
  33. const [treeData, setTreeData] = useState(initTreeDate);
  34. function onLoadData({ key, children }) {
  35. return new Promise(resolve => {
  36. if (children) {
  37. resolve();
  38. return;
  39. }
  40. setTimeout(() => {
  41. setTreeData(origin =>
  42. updateTreeData(origin, key, [
  43. { title: 'Child Node', key: `${key}-0` },
  44. { title: 'Child Node', key: `${key}-1` },
  45. ]),
  46. );
  47. resolve();
  48. }, 1000);
  49. });
  50. }
  51. return <Tree loadData={onLoadData} treeData={treeData} />;
  52. };
  53. class Demo1 extends React.Component {
  54. state = {
  55. treeData: [
  56. { title: 'Expand to load', key: '0' },
  57. { title: 'Expand to load', key: '1' },
  58. { title: 'Tree Node', key: '2', isLeaf: true },
  59. ],
  60. };
  61. onLoadData = treeNode => {
  62. const { treeData } = this.state;
  63. return new Promise(resolve => {
  64. const { props } = treeNode;
  65. if (treeNode.children) {
  66. resolve();
  67. return;
  68. }
  69. setTimeout(() => {
  70. treeNode.children = [
  71. { title: 'Child Node', key: `${treeNode.eventKey}-0` },
  72. { title: 'Child Node', key: `${treeNode.eventKey}-1` },
  73. ];
  74. this.setState({
  75. treeData: [...this.state.treeData],
  76. });
  77. resolve();
  78. }, 1000);
  79. });
  80. };
  81. render() {
  82. return <Tree loadData={this.onLoadData} treeData={this.state.treeData} />;
  83. }
  84. }
  85. ReactDOM.render(<Demo />, mountNode);

Tree树形控件 - 图8

连接线

节点之间带连接线的树,常用于文件目录结构展示。使用 showLine 开启,可以用 switcherIcon 修改默认图标。

TypeScript

JavaScript

  1. import React, { useState } from 'react';
  2. import { Tree, Switch } from 'antd';
  3. import { CarryOutOutlined, FormOutlined } from '@ant-design/icons';
  4. const treeData = [
  5. {
  6. title: 'parent 1',
  7. key: '0-0',
  8. icon: <CarryOutOutlined />,
  9. children: [
  10. {
  11. title: 'parent 1-0',
  12. key: '0-0-0',
  13. icon: <CarryOutOutlined />,
  14. children: [
  15. { title: 'leaf', key: '0-0-0-0', icon: <CarryOutOutlined /> },
  16. { title: 'leaf', key: '0-0-0-1', icon: <CarryOutOutlined /> },
  17. { title: 'leaf', key: '0-0-0-2', icon: <CarryOutOutlined /> },
  18. ],
  19. },
  20. {
  21. title: 'parent 1-1',
  22. key: '0-0-1',
  23. icon: <CarryOutOutlined />,
  24. children: [{ title: 'leaf', key: '0-0-1-0', icon: <CarryOutOutlined /> }],
  25. },
  26. {
  27. title: 'parent 1-2',
  28. key: '0-0-2',
  29. icon: <CarryOutOutlined />,
  30. children: [
  31. { title: 'leaf', key: '0-0-2-0', icon: <CarryOutOutlined /> },
  32. {
  33. title: 'leaf',
  34. key: '0-0-2-1',
  35. icon: <CarryOutOutlined />,
  36. switcherIcon: <FormOutlined />,
  37. },
  38. ],
  39. },
  40. ],
  41. },
  42. ];
  43. const Demo: React.FC<{}> = () => {
  44. const [showLine, setShowLine] = useState(true);
  45. const [showIcon, setShowIcon] = useState(false);
  46. const onSelect = (selectedKeys, info) => {
  47. console.log('selected', selectedKeys, info);
  48. };
  49. return (
  50. <div>
  51. <div style={{ marginBottom: 16 }}>
  52. showLine: <Switch checked={showLine} onChange={setShowLine} />
  53. <br />
  54. <br />
  55. showIcon: <Switch checked={showIcon} onChange={setShowIcon} />
  56. </div>
  57. <Tree
  58. showLine={showLine}
  59. showIcon={showIcon}
  60. defaultExpandedKeys={['0-0-0']}
  61. onSelect={onSelect}
  62. treeData={treeData}
  63. />
  64. </div>
  65. );
  66. };
  67. ReactDOM.render(<Demo />, mountNode);

Tree树形控件 - 图9

目录

内置的目录树,multiple 模式支持 ctrl(Windows) / command(Mac) 复选。

TypeScript

JavaScript

  1. import { Tree } from 'antd';
  2. const { DirectoryTree } = Tree;
  3. const treeData = [
  4. {
  5. title: 'parent 0',
  6. key: '0-0',
  7. children: [
  8. { title: 'leaf 0-0', key: '0-0-0', isLeaf: true },
  9. { title: 'leaf 0-1', key: '0-0-1', isLeaf: true },
  10. ],
  11. },
  12. {
  13. title: 'parent 1',
  14. key: '0-1',
  15. children: [
  16. { title: 'leaf 1-0', key: '0-1-0', isLeaf: true },
  17. { title: 'leaf 1-1', key: '0-1-1', isLeaf: true },
  18. ],
  19. },
  20. ];
  21. const Demo: React.FC<{}> = () => {
  22. const onSelect = (keys, event) => {
  23. console.log('Trigger Select', keys, event);
  24. };
  25. const onExpand = () => {
  26. console.log('Trigger Expand');
  27. };
  28. return (
  29. <DirectoryTree
  30. multiple
  31. defaultExpandAll
  32. onSelect={onSelect}
  33. onExpand={onExpand}
  34. treeData={treeData}
  35. />
  36. );
  37. };
  38. ReactDOM.render(<Demo />, mountNode);

Tree树形控件 - 图10

虚拟滚动

使用 height 属性则切换为虚拟滚动。

  1. import { Tree } from 'antd';
  2. function dig(path = '0', level = 3) {
  3. const list = [];
  4. for (let i = 0; i < 10; i += 1) {
  5. const key = `${path}-${i}`;
  6. const treeNode = {
  7. title: key,
  8. key,
  9. };
  10. if (level > 0) {
  11. treeNode.children = dig(key, level - 1);
  12. }
  13. list.push(treeNode);
  14. }
  15. return list;
  16. }
  17. const treeData = dig();
  18. ReactDOM.render(<Tree treeData={treeData} height={233} defaultExpandAll />, mountNode);

API

Tree props

参数说明类型默认值版本
autoExpandParent是否自动展开父节点booleantrue
blockNode是否节点占据一行booleanfalse
checkable节点前添加 Checkbox 复选框booleanfalse
checkedKeys(受控)选中复选框的树节点(注意:父子节点有关联,如果传入父节点 key,则子节点自动选中;相应当子节点 key 都传入,父节点也自动选中。当设置checkablecheckStrictly,它是一个有checkedhalfChecked属性的对象,并且父子节点的选中与否不再关联string[] | {checked: string[], halfChecked: string[]}[]
checkStrictlycheckable 状态下节点选择完全受控(父子节点选中状态不再关联)booleanfalse
defaultCheckedKeys默认选中复选框的树节点string[][]
defaultExpandAll默认展开所有树节点booleanfalse
defaultExpandedKeys默认展开指定的树节点string[][]
defaultExpandParent默认展开父节点booltrue
defaultSelectedKeys默认选中的树节点string[][]
disabled将树禁用boolfalse
draggable设置节点可拖拽(IE>8)booleanfalse
expandedKeys(受控)展开指定的树节点string[][]
filterTreeNode按需筛选树节点(高亮),返回 truefunction(node)-
loadData异步加载数据function(node)-
loadedKeys(受控)已经加载的节点,需要配合 loadData 使用string[][]
multiple支持点选多个节点(节点本身)booleanfalse
selectable是否可选中booleantrue
selectedKeys(受控)设置选中的树节点string[]-
showIcon是否展示 TreeNode title 前的图标,没有默认样式,如设置为 true,需要自行定义图标相关样式booleanfalse
switcherIcon自定义树节点的展开/折叠图标ReactNode-
showLine是否展示连接线booleanfalse
treeDatatreeNodes 数据,如果设置则不需要手动构造 TreeNode 节点(key 在整个树范围内唯一)array\<{key, title, children, [disabled, selectable]}>-
virtual设置 false 时关闭虚拟滚动boolean-4.1.0
onCheck点击复选框触发function(checkedKeys, e:{checked: bool, checkedNodes, node, event, halfCheckedKeys})-
onDragEnddragend 触发时调用function({event, node})-
onDragEnterdragenter 触发时调用function({event, node, expandedKeys})-
onDragLeavedragleave 触发时调用function({event, node})-
onDragOverdragover 触发时调用function({event, node})-
onDragStart开始拖拽时调用function({event, node})-
onDropdrop 触发时调用function({event, node, dragNode, dragNodesKeys})-
onExpand展开/收起节点时触发function(expandedKeys, {expanded: bool, node})-
onLoad节点加载完毕时触发function(loadedKeys, {event, node})-
onRightClick响应右键点击function({event, node})-
onSelect点击树节点触发function(selectedKeys, e:{selected: bool, selectedNodes, node, event})-

TreeNode props

参数说明类型默认值
checkable当树为 checkable 时,设置独立节点是否展示 Checkboxboolean-
disableCheckbox禁掉 checkboxbooleanfalse
disabled禁掉响应booleanfalse
icon自定义图标。可接收组件,props 为当前节点 propsReactNode/Function(props):ReactNode-
isLeaf设置为叶子节点(设置了loadData时有效)booleanfalse
key被树的 (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys 属性所用。注意:整个树范围内的所有节点的 key 值不能重复!string内部计算出的节点位置
selectable设置节点是否可被选中booleantrue
title标题string|ReactNode'—-'

DirectoryTree props

参数说明类型默认值
expandAction目录展开逻辑,可选 false 'click' 'doubleClick'stringclick

注意

3.4.0 之前:树节点可以有很多,但在设置checkable时,将会花费更多的计算时间,因此我们缓存了一些计算结果(this.treeNodesStates)来复用,避免多次重复计算,以此提高性能。但这也带来了一些限制,当你异步加载树节点时,你需要这样渲染树:

  1. {
  2. this.state.treeData.length ? (
  3. <Tree>
  4. {this.state.treeData.map(data => (
  5. <TreeNode />
  6. ))}
  7. </Tree>
  8. ) : (
  9. 'loading tree'
  10. );
  11. }

FAQ

在 showLine 时,如何隐藏子节点图标?

文件图标通过 switcherIcon 来实现,如果不需要你可以覆盖对应的样式:https://codesandbox.io/s/883vo47xp8

defaultExpandedAll 在异步加载数据时为何不生效?

default 前缀属性只有在初始化时生效,因而异步加载数据时 defaultExpandedAll 已经执行完成。你可以通过受控 expandedKeys 或者在数据加载完成后渲染 Tree 来实现全部展开。