react 树形菜单_react-tree-menu：React的无状态树型菜单组件
React Tree Menu Component
A stateless tree component with the following features:
Checkboxes
Collapsible nodes
Dynamic tree generation
Declarative tree menus
Built with the Flux proposal in mind (i.e. trickle-down state)
Please check out the Demo.
Install
npm install --save react-tree-menu
General Usage
var TreeMenu = require('react-tree-menu').TreeMenu,
TreeNode = require('react-tree-menu').TreeNode;
...
Exports
This package exports the following:
module.exports = {
TreeMenu: require('./src/TreeMenu.jsx'),
TreeNode: require('./src/TreeNode.jsx'),
Utils: require('./src/TreeMenuUtils')
};
Declarative use
In your .render() method, embed TreeMenu:
return
identifier={"id"}
onTreeNodeClick={this._setLastActionState.bind(this, "clicked")}
onTreeNodeCheckChange={this._setLastActionState.bind(this, "checked")}
collapsible={false}
expandIconClass="fa fa-chevron-right"
collapseIconClass="fa fa-chevron-down">
;Dynamic use w/ the 'data' prop
In your .render() method, embed TreeMenu with a data prop:
var data = [{
label : "Option 1"
},
{
label : "Option 2",
children : [
{
checkbox: true,
label: "Sub Option A",
children: [
{
label: "Third Level Nest Option 1",
checkbox : true
},
{
label: "Third Level Nest Option 2",
checkbox : true
}
]
},
{
checkbox: true,
label: "Sub Option B"
}
]
}];
return
onTreeNodeClick={...}
onTreeNodeCollapseChange={...}
onTreeNodeCheckChange={...}
data={data} />;
Style Guide
To style , use the following props:
See the example CSS for how this works.
Props
sort={ || }
If sort is a Boolean and true (i.e. ), the node label will be used for sorting.
If sort is a Function, it will be used as the sort function, with the argument the React element (props are available for sorting). Example:
node.props.value} ... />
stateful={}
If you need it, you can make keep track of its own state. That being said, react-tree-menu was designed to fit inside Flux architecture, which encourages components to render based on props passed from the Controller-View. Defaults to false.
classNamePrefix={}
The prefix to put in front of all the CSS classes for nested element (like the container for the menu, the checkbox, etc)
identifier={}
Optional prop/field to use for the node identifier. Defaults to Array index
collapsible={}
Whether or not nested components are collapsible. Defaults to true.
expandIconClass={}
The CSS class to give the expand icon component. Empty by default.
collapseIconClass={}
The CSS class to give the collapse icon component. Empty by default
labelFilter={}
A function that can be used to filter/transform the label. Empty by default
labelFactory={}
A factory function that returns a label node. See example source for usage.
checkboxFactory={}
A factory function that returns a checkbox node. See example source for usage.
onTreeNodeClick={}
Function handler for click event on components. If the TreeNode has an onTreeNodeSelectChange handler, this is not fired. See Callback API. Defaults to noop.
onTreeNodeCollapseChange={}
Function handler for collapse change event on components. See Callback API. Defaults to noop.
onTreeNodeCheckChange={}
Function handler for checkbox change event on components. See Callback API. Defaults to noop.
onTreeNodeSelectChange={}
Function handler for select state change event on components. An alternative for cases when checkboxes aren't desired. See Callback API. Defaults to noop.
data={||}
The data to use when building components dynamically. Required if there aren't any nested elements declared.
Sample array format:
[{label : "Option 1"},
{
label : "Option 2",
children : [
{
checkbox: true,
label: "Sub Option A",
children: [{
label: "Third Level Nest Option 1",
checkbox : true,
children : {...},
}]
},
{
checkbox: true,
label: "Sub Option B"
}]}]
Sample object format:
{
"Option 1" : {
checked: true,
checkbox: true,
children: {
"Sub Option 1" : {
checked: false
},
"Sub Option 2" : {
checked: false,
checkbox: true,
children: {
"Sub-Sub Option 1" : {
checked: false,
checkbox: true
},
"Sub-Sub Option 2" : {
checked: false,
checkbox: true
}
}
}
}
},
"Option 2" : {
checked: false,
checkbox: true
}
}
Callback API for event handler props
callbacks will receive an array representation of the node. Example:
var onClick = function(node) {
//node is in format: [, [...,] ]
//where is the that sourced the event
//...
}
return ;
Props
label={}
The node label. Required.
checkbox={}
Whether or not the node has a checkbox. Defaults to false. If the node checkbox={true}, clicking on the label also fires the onTreeNodeCheckChange function
checked={}
If the node has a checkbox, whether or not the node is checked. If the node checkbox={true}, clicking on the label also fires the onTreeNodeCheckChange function instead od the onTreeNodeClick function
selected={}
Whether or not the node is selected. An alternative to using checked in conjunction w/ checkbox.
collapsible={}
Whether or not the node is collapsible. If the node has no children, this value has no effect. Defaults to true. This value is overridden by the collapsible prop value set on the root
collapsed={}
If the node is collapsible, whether or not the node is collapsed. Defaults to false.