---
order: 5
title:
zh-CN: 连接线
en-US: Tree with line
---
## zh-CN
节点之间带连接线的树，常用于文件目录结构展示。使用 `showLine` 开启，可以用 `switcherIcon` 修改默认图标。
## en-US
Tree with connected line between nodes, turn on by `showLine`, customize the preseted icon by `switcherIcon`.
```jsx
import { Tree, Icon, Switch } from 'antd';
const { TreeNode } = Tree;
class Demo extends React.Component {
state = {
showLine: true,
showIcon: false,
}
onShowLineChange = showLine => {
this.setState({ showLine });
}
onShowIconChange = showIcon => {
this.setState({ showIcon });
}
render() {
const { showIcon, showLine } = this.state;
return (
showLine:
showIcon:
} title="parent 1" key="0-0">
} title="parent 1-0" key="0-0-0">
} title="leaf" key="0-0-0-0" />
} title="leaf" key="0-0-0-1" />
} title="leaf" key="0-0-0-2" />
} title="parent 1-1" key="0-0-1">
} title="leaf" key="0-0-1-0" />
} title="parent 1-2" key="0-0-2">
} title="leaf" key="0-0-2-0" />
}
icon={}
title="leaf"
key="0-0-2-1"
/>
);
}
}
ReactDOM.render(, mountNode);
```