import React, { useState } from 'react'; import { CarryOutOutlined, CheckOutlined, FormOutlined } from '@ant-design/icons'; import { Select, Switch, Tree } from 'antd'; import type { TreeDataNode } from 'antd'; const treeData: TreeDataNode[] = [ { title: 'parent 1', key: '0-0', icon: <CarryOutOutlined />, children: [ { title: 'parent 1-0', key: '0-0-0', icon: <CarryOutOutlined />, children: [ { title: 'leaf', key: '0-0-0-0', icon: <CarryOutOutlined /> }, { title: ( <> <div>multiple line title</div> <div>multiple line title</div> </> ), key: '0-0-0-1', icon: <CarryOutOutlined />, }, { title: 'leaf', key: '0-0-0-2', icon: <CarryOutOutlined /> }, ], }, { title: 'parent 1-1', key: '0-0-1', icon: <CarryOutOutlined />, children: [{ title: 'leaf', key: '0-0-1-0', icon: <CarryOutOutlined /> }], }, { title: 'parent 1-2', key: '0-0-2', icon: <CarryOutOutlined />, children: [ { title: 'leaf', key: '0-0-2-0', icon: <CarryOutOutlined /> }, { title: 'leaf', key: '0-0-2-1', icon: <CarryOutOutlined />, switcherIcon: <FormOutlined />, }, ], }, ], }, { title: 'parent 2', key: '0-1', icon: <CarryOutOutlined />, children: [ { title: 'parent 2-0', key: '0-1-0', icon: <CarryOutOutlined />, children: [ { title: 'leaf', key: '0-1-0-0', icon: <CarryOutOutlined /> }, { title: 'leaf', key: '0-1-0-1', icon: <CarryOutOutlined /> }, ], }, ], }, ]; const App: React.FC = () => { const [showLine, setShowLine] = useState<boolean>(true); const [showIcon, setShowIcon] = useState<boolean>(false); const [showLeafIcon, setShowLeafIcon] = useState<React.ReactNode>(true); const onSelect = (selectedKeys: React.Key[], info: any) => { console.log('selected', selectedKeys, info); }; const handleLeafIconChange = (value: 'true' | 'false' | 'custom') => { if (value === 'custom') { return setShowLeafIcon(<CheckOutlined />); } if (value === 'true') { return setShowLeafIcon(true); } return setShowLeafIcon(false); }; return ( <div> <div style={{ marginBottom: 16 }}> showLine: <Switch checked={!!showLine} onChange={setShowLine} /> <br /> <br /> showIcon: <Switch checked={showIcon} onChange={setShowIcon} /> <br /> <br /> showLeafIcon:{' '} <Select defaultValue="true" onChange={handleLeafIconChange}> <Select.Option value="true">True</Select.Option> <Select.Option value="false">False</Select.Option> <Select.Option value="custom">Custom icon</Select.Option> </Select> </div> <Tree showLine={showLine ? { showLeafIcon } : false} showIcon={showIcon} defaultExpandedKeys={['0-0-0']} onSelect={onSelect} treeData={treeData} /> </div> ); }; export default App;