react-ant-tree
Ant tree wrapper.
installation
npm install -S @feizheng/react-ant-tree
update
npm update @feizheng/react-ant-tree
warning
个人认为,去掉 children 是个失败的改进。
Warning: `children` of Tree is deprecated. Please use `treeData` instead.
properties
Name | Type | Required | Default | Description |
---|---|---|---|---|
className | string | false | - | The extended className for component. |
directory | bool | false | false | If show directory icon. |
items | array | false | [] | The tree data. |
template | func | false | - | The item template function. |
itemsKey | union | false | 'children' | The items key. |
usage
- import css
@import "~@feizheng/react-ant-tree/dist/style.scss";
// customize your styles:
$react-ant-tree-options: ()
- import js
import ReactDemokit from '@feizheng/react-demokit';
import { Tree } from 'antd';
import React from 'react';
import ReactDOM from 'react-dom';
import ReactAntTree from '@feizheng/react-ant-tree';
import './assets/style.scss';
class App extends React.Component {
constructor(inProps) {
super(inProps);
this.state = {
items: [
{
label: '0-0',
value: '0-0',
children: [
{
label: '0-0-0',
value: '0-0-0',
children: [
{ label: '0-0-0-0', value: '0-0-0-0' },
{ label: '0-0-0-1', value: '0-0-0-1' },
{ label: '0-0-0-2', value: '0-0-0-2' }
]
},
{
label: '0-0-1',
value: '0-0-1',
children: [
{ label: '0-0-1-0', value: '0-0-1-0' },
{ label: '0-0-1-1', value: '0-0-1-1' },
{ label: '0-0-1-2', value: '0-0-1-2' }
]
},
{
label: '0-0-2',
value: '0-0-2'
}
]
},
{
label: '0-1',
value: '0-1',
children: [
{ label: '0-1-0-0', value: '0-1-0-0' },
{ label: '0-1-0-1', value: '0-1-0-1' },
{ label: '0-1-0-2', value: '0-1-0-2' }
]
},
{
label: '0-2',
value: '0-2'
}
]
};
}
template = ({ item }, cb) => {
const { value, label, independent } = item;
return (
<Tree.TreeNode key={value} value={value} title={label}>
{cb()}
</Tree.TreeNode>
);
};
onSelect = (s, e) => {
console.log('s,e', s, e);
};
render() {
return (
<ReactDemokit
className="p-3 app-container"
url="https://github.com/afeiship/react-ant-tree">
<ReactAntTree
onSelect={this.onSelect}
showLine
items={this.state.items}
template={this.template}
/>
</ReactDemokit>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));
documentation
license
Code released under the MIT license.