From 7a2c9cc7afcc709f96cba7b90b397d09b56dbe43 Mon Sep 17 00:00:00 2001
From: youluna <njuzhaoguoyan@foxmail.com>
Date: Wed, 27 Feb 2019 01:25:17 +0800
Subject: [PATCH] fix(Tree): throw error when children contain null or string

---
 src/tree-select/tree-select.jsx | 202 +++++++-----
 src/tree/view/tree.jsx          | 260 ++++++++++-----
 test/tree/a11y-spec.js          |  81 +++--
 test/tree/index-spec.js         | 538 +++++++++++++++++++++++---------
 4 files changed, 751 insertions(+), 330 deletions(-)

diff --git a/src/tree-select/tree-select.jsx b/src/tree-select/tree-select.jsx
index aadbec911d..3cbfe16423 100644
--- a/src/tree-select/tree-select.jsx
+++ b/src/tree-select/tree-select.jsx
@@ -1,4 +1,9 @@
-import React, { Component, Children, isValidElement, cloneElement } from 'react';
+import React, {
+    Component,
+    Children,
+    isValidElement,
+    cloneElement,
+} from 'react';
 import PropTypes from 'prop-types';
 import Select from '../select';
 import Tree from '../tree';
@@ -7,7 +12,7 @@ import {
     getAllCheckedKeys,
     filterChildKey,
     filterParentKey,
-    isDescendantOrSelf
+    isDescendantOrSelf,
 } from '../tree/view/util';
 import { func, obj, KEYCODE } from '../util';
 
@@ -71,11 +76,17 @@ export default class TreeSelect extends Component {
         /**
          * （受控）当前值
          */
-        value: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+        value: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.arrayOf(PropTypes.string),
+        ]),
         /**
          * （非受控）默认值
          */
-        defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+        defaultValue: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.arrayOf(PropTypes.string),
+        ]),
         /**
          * 选中值改变时触发的回调函数
          * @param {String|Array} value 选中的值，单选时返回单个值，多选时返回数组
@@ -159,7 +170,7 @@ export default class TreeSelect extends Component {
         /**
          * 透传到 Popup 的属性对象
          */
-        popupProps: PropTypes.object
+        popupProps: PropTypes.object,
     };
 
     static defaultProps = {
@@ -185,7 +196,7 @@ export default class TreeSelect extends Component {
         treeDefaultExpandedKeys: [],
         treeProps: {},
         defaultVisible: false,
-        onVisibleChange: noop
+        onVisibleChange: noop,
     };
 
     constructor(props, context) {
@@ -194,10 +205,12 @@ export default class TreeSelect extends Component {
         const { defaultVisible, visible, defaultValue, value } = props;
         this.state = {
             visible: typeof visible === 'undefined' ? defaultVisible : visible,
-            value: normalizeToArray(typeof value === 'undefined' ? defaultValue : value),
+            value: normalizeToArray(
+                typeof value === 'undefined' ? defaultValue : value
+            ),
             searchedValue: '',
             expandedKeys: [],
-            autoExpandParent: false
+            autoExpandParent: false,
         };
 
         bindCtx(this, [
@@ -211,7 +224,7 @@ export default class TreeSelect extends Component {
             'handleExpand',
             'handleKeyDown',
             'saveTreeRef',
-            'saveSelectRef'
+            'saveSelectRef',
         ]);
 
         this.updateCache(props);
@@ -239,32 +252,42 @@ export default class TreeSelect extends Component {
         this._v2n = {};
 
         if ('dataSource' in props) {
-            const loop = (data, prefix = '0') => data.map((item, index) => {
-                const { value, children } = item;
-                const pos = `${prefix}-${index}`;
-                const key = item.key || pos;
-                const newItem = { ...item, key, pos };
-                if (children && children.length) {
-                    newItem.children = loop(children, pos);
-                }
+            const loop = (data, prefix = '0') =>
+                data.map((item, index) => {
+                    const { value, children } = item;
+                    const pos = `${prefix}-${index}`;
+                    const key = item.key || pos;
+                    const newItem = { ...item, key, pos };
+                    if (children && children.length) {
+                        newItem.children = loop(children, pos);
+                    }
 
-                this._k2n[key] = this._p2n[pos] = this._v2n[value] = newItem;
-                return newItem;
-            });
+                    this._k2n[key] = this._p2n[pos] = this._v2n[
+                        value
+                    ] = newItem;
+                    return newItem;
+                });
             loop(props.dataSource);
         } else if ('children' in props) {
-            const loop = (children, prefix = '0') => Children.map(children, (node, index) => {
-                const { value, children } = node.props;
-                const pos = `${prefix}-${index}`;
-                const key = node.key || pos;
-                const newItem = { ...node.props, key, pos };
-                if (children && Children.count(children)) {
-                    newItem.children = loop(children, pos);
-                }
+            const loop = (children, prefix = '0') =>
+                Children.map(children, (node, index) => {
+                    if (!React.isValidElement(node)) {
+                        return;
+                    }
 
-                this._k2n[key] = this._p2n[pos] = this._v2n[value] = newItem;
-                return newItem;
-            });
+                    const { value, children } = node.props;
+                    const pos = `${prefix}-${index}`;
+                    const key = node.key || pos;
+                    const newItem = { ...node.props, key, pos };
+                    if (children && Children.count(children)) {
+                        newItem.children = loop(children, pos);
+                    }
+
+                    this._k2n[key] = this._p2n[pos] = this._v2n[
+                        value
+                    ] = newItem;
+                    return newItem;
+                });
             loop(props.children);
         }
     }
@@ -312,7 +335,7 @@ export default class TreeSelect extends Component {
                 const d = {
                     value: v,
                     label,
-                    pos
+                    pos,
                 };
                 if (forSelect) {
                     d.disabled = disabled || checkboxDisabled;
@@ -337,7 +360,7 @@ export default class TreeSelect extends Component {
     handleVisibleChange(visible, type) {
         if (!('visible' in this.props)) {
             this.setState({
-                visible
+                visible,
             });
         }
 
@@ -356,7 +379,7 @@ export default class TreeSelect extends Component {
             const value = this.getValueByKeys(selectedKeys);
             if (!('value' in this.props)) {
                 this.setState({
-                    value
+                    value,
                 });
             }
             if (!multiple) {
@@ -364,9 +387,7 @@ export default class TreeSelect extends Component {
             }
 
             const data = this.getData(value);
-            multiple ?
-                onChange(value, data) :
-                onChange(value[0], data[0]);
+            multiple ? onChange(value, data) : onChange(value[0], data[0]);
         } else {
             this.handleVisibleChange(false, 'fromTree');
         }
@@ -378,7 +399,7 @@ export default class TreeSelect extends Component {
         const value = this.getValueByKeys(checkedKeys);
         if (!('value' in this.props)) {
             this.setState({
-                value
+                value,
             });
         }
 
@@ -387,10 +408,19 @@ export default class TreeSelect extends Component {
 
     handleRemove(removedItem) {
         const { value: removedValue } = removedItem;
-        const { treeCheckable, treeCheckStrictly, treeCheckedStrategy, onChange } = this.props;
+        const {
+            treeCheckable,
+            treeCheckStrictly,
+            treeCheckedStrategy,
+            onChange,
+        } = this.props;
 
         let value;
-        if (treeCheckable && !treeCheckStrictly && treeCheckedStrategy === 'all') {
+        if (
+            treeCheckable &&
+            !treeCheckStrictly &&
+            treeCheckedStrategy === 'all'
+        ) {
             const removedPos = this._v2n[removedValue].pos;
             value = this.state.value.filter(v => {
                 const p = this._v2n[v].pos;
@@ -412,10 +442,9 @@ export default class TreeSelect extends Component {
             value = this.state.value.filter(v => v !== removedValue);
         }
 
-
         if (!('value' in this.props)) {
             this.setState({
-                value
+                value,
             });
         }
 
@@ -446,7 +475,7 @@ export default class TreeSelect extends Component {
         this.setState({
             searchedValue,
             expandedKeys: searchedKeys,
-            autoExpandParent: true
+            autoExpandParent: true,
         });
         this.searchedKeys = searchedKeys;
         this.retainedKeys = retainedKeys;
@@ -457,7 +486,7 @@ export default class TreeSelect extends Component {
     handleSearchClear(triggerType) {
         this.setState({
             searchedValue: '',
-            expandedKeys: []
+            expandedKeys: [],
         });
         this.props.onSearchClear(triggerType);
     }
@@ -465,7 +494,7 @@ export default class TreeSelect extends Component {
     handleExpand(expandedKeys) {
         this.setState({
             expandedKeys,
-            autoExpandParent: false
+            autoExpandParent: false,
         });
     }
 
@@ -487,7 +516,8 @@ export default class TreeSelect extends Component {
                 this.tree.setFocusKey();
                 e.preventDefault();
                 break;
-            default: break;
+            default:
+                break;
         }
     }
 
@@ -497,7 +527,7 @@ export default class TreeSelect extends Component {
         if (hasClear && (!multiple || !treeCheckable)) {
             if (!('value' in this.props)) {
                 this.setState({
-                    value: []
+                    value: [],
                 });
             }
 
@@ -516,8 +546,10 @@ export default class TreeSelect extends Component {
         };
         loop(label);
 
-        if (labelString.length >= searchedValue.length &&
-            labelString.indexOf(searchedValue) > -1) {
+        if (
+            labelString.length >= searchedValue.length &&
+            labelString.indexOf(searchedValue) > -1
+        ) {
             return true;
         }
 
@@ -531,12 +563,14 @@ export default class TreeSelect extends Component {
                 if (this.searchedKeys.indexOf(child.key) > -1) {
                     retainedNodes.push(child);
                 } else if (this.retainedKeys.indexOf(child.key) > -1) {
-                    const retainedNode = child.props.children ?
-                        cloneElement(child, {}, loop(child.props.children)) :
-                        child;
+                    const retainedNode = child.props.children
+                        ? cloneElement(child, {}, loop(child.props.children))
+                        : child;
                     retainedNodes.push(retainedNode);
                 } else {
-                    const hideNode = cloneElement(child, { style: { display: 'none' } });
+                    const hideNode = cloneElement(child, {
+                        style: { display: 'none' },
+                    });
                     retainedNodes.push(hideNode);
                 }
             });
@@ -558,15 +592,20 @@ export default class TreeSelect extends Component {
                     if (hide) {
                         others.style = { display: 'none' };
                     }
-                    retainedNodes.push((
+                    retainedNodes.push(
                         <TreeNode {...others} key={key}>
-                            {children && children.length ? loop(children, isParentMatched, pos) : null}
+                            {children && children.length
+                                ? loop(children, isParentMatched, pos)
+                                : null}
                         </TreeNode>
-                    ));
+                    );
                 };
 
                 if (searching) {
-                    if (this.searchedKeys.indexOf(key) > -1 || isParentMatched) {
+                    if (
+                        this.searchedKeys.indexOf(key) > -1 ||
+                        isParentMatched
+                    ) {
                         addNode(true);
                     } else if (this.retainedKeys.indexOf(key) > -1) {
                         addNode(false);
@@ -605,13 +644,13 @@ export default class TreeSelect extends Component {
             dataSource,
             children,
             readOnly,
-            notFoundContent
+            notFoundContent,
         } = this.props;
         const {
             value,
             searchedValue,
             expandedKeys,
-            autoExpandParent
+            autoExpandParent,
         } = this.state;
 
         const treeProps = {
@@ -619,14 +658,16 @@ export default class TreeSelect extends Component {
             ref: this.saveTreeRef,
             loadData: treeLoadData,
             defaultExpandAll: treeDefaultExpandAll,
-            defaultExpandedKeys: treeDefaultExpandedKeys
+            defaultExpandedKeys: treeDefaultExpandedKeys,
         };
 
         const keys = this.getKeysByValue(value);
         if (treeCheckable) {
             treeProps.checkable = treeCheckable;
             treeProps.checkStrictly = treeCheckStrictly;
-            treeProps.checkedStrategy = treeCheckStrictly ? 'all' : treeCheckedStrategy;
+            treeProps.checkedStrategy = treeCheckStrictly
+                ? 'all'
+                : treeCheckedStrategy;
             treeProps.checkedKeys = keys;
             if (!readOnly) {
                 treeProps.onCheck = this.handleCheck;
@@ -649,9 +690,9 @@ export default class TreeSelect extends Component {
             };
 
             if (this.searchedKeys.length) {
-                newChildren = dataSource ?
-                    this.createNodesByData(dataSource, true) :
-                    this.searchNodes(children);
+                newChildren = dataSource
+                    ? this.createNodesByData(dataSource, true)
+                    : this.searchNodes(children);
             } else {
                 notFound = true;
             }
@@ -675,11 +716,15 @@ export default class TreeSelect extends Component {
 
         return (
             <div className={`${treeSelectPrefix}dropdown`}>
-                {notFound ?
-                    <div className={`${treeSelectPrefix}not-found`}>{notFoundContent}</div> :
+                {notFound ? (
+                    <div className={`${treeSelectPrefix}not-found`}>
+                        {notFoundContent}
+                    </div>
+                ) : (
                     <Tree {...customTreeProps} {...treeProps}>
                         {newChildren}
-                    </Tree>}
+                    </Tree>
+                )}
             </div>
         );
     }
@@ -704,22 +749,26 @@ export default class TreeSelect extends Component {
             treeCheckStrictly,
             className,
             popupContainer,
-            popupProps
+            popupProps,
         } = this.props;
-        const others = pickOthers(Object.keys(TreeSelect.propTypes), this.props);
-        const {
-            value,
-            visible
-        } = this.state;
+        const others = pickOthers(
+            Object.keys(TreeSelect.propTypes),
+            this.props
+        );
+        const { value, visible } = this.state;
 
-        const valueForSelect = treeCheckable && !treeCheckStrictly ? this.getValueForSelect(value) : value;
+        const valueForSelect =
+            treeCheckable && !treeCheckStrictly
+                ? this.getValueForSelect(value)
+                : value;
         let data = this.getData(valueForSelect, true);
         if (!multiple && !treeCheckable) {
             data = data[0];
         }
 
         return (
-            <Select prefix={prefix}
+            <Select
+                prefix={prefix}
                 className={className}
                 size={size}
                 hasBorder={hasBorder}
@@ -746,7 +795,8 @@ export default class TreeSelect extends Component {
                 popupStyle={popupStyle}
                 popupClassName={popupClassName}
                 popupProps={popupProps}
-                {...others} />
+                {...others}
+            />
         );
     }
 }
diff --git a/src/tree/view/tree.jsx b/src/tree/view/tree.jsx
index 4047a0c80e..a57f7c996d 100644
--- a/src/tree/view/tree.jsx
+++ b/src/tree/view/tree.jsx
@@ -9,7 +9,7 @@ import {
     isSiblingOrSelf,
     filterChildKey,
     filterParentKey,
-    getAllCheckedKeys
+    getAllCheckedKeys,
 } from './util';
 
 const { bindCtx, noop } = func;
@@ -71,7 +71,7 @@ export default class Tree extends Component {
          */
         checkedKeys: PropTypes.oneOfType([
             PropTypes.arrayOf(PropTypes.string),
-            PropTypes.object
+            PropTypes.object,
         ]),
         /**
          * （用于非受控）默认勾选复选框节点 key 的数组
@@ -230,7 +230,7 @@ export default class Tree extends Component {
         autoFocus: PropTypes.bool,
         onItemFocus: PropTypes.func,
         onBlur: PropTypes.func,
-        onItemKeyDown: PropTypes.func
+        onItemKeyDown: PropTypes.func,
     };
 
     static defaultProps = {
@@ -268,7 +268,7 @@ export default class Tree extends Component {
         focusable: true,
         autoFocus: false,
         onItemFocus: noop,
-        onItemKeyDown: noop
+        onItemKeyDown: noop,
     };
 
     constructor(props) {
@@ -287,10 +287,20 @@ export default class Tree extends Component {
             expandedKeys: this.getExpandedKeys(props),
             selectedKeys: this.getSelectedKeys(props),
             checkedKeys: this.getCheckedKeys(props),
-            focusedKey: 'focusedKey' in this.props ? focusedKey : (focusable && autoFocus ? this.tabbableKey : null)
+            focusedKey:
+                'focusedKey' in this.props
+                    ? focusedKey
+                    : focusable && autoFocus
+                    ? this.tabbableKey
+                    : null,
         };
 
-        bindCtx(this, ['handleExpand', 'handleSelect', 'handleCheck', 'handleBlur']);
+        bindCtx(this, [
+            'handleExpand',
+            'handleSelect',
+            'handleCheck',
+            'handleBlur',
+        ]);
     }
 
     componentWillReceiveProps(nextProps) {
@@ -318,32 +328,38 @@ export default class Tree extends Component {
         this._p2n = {};
 
         if ('dataSource' in props) {
-            const loop = (data, prefix = '0') => data.forEach((item, index) => {
-                const pos = `${prefix}-${index}`;
-                let { key } = item;
-                key = key || pos;
-                const newItem = { ...item, key, pos };
-                const { children } = item;
-                if (children && children.length) {
-                    loop(children, pos);
-                }
-                this._k2n[key] = this._p2n[pos] = newItem;
-            });
+            const loop = (data, prefix = '0') =>
+                data.forEach((item, index) => {
+                    const pos = `${prefix}-${index}`;
+                    let { key } = item;
+                    key = key || pos;
+                    const newItem = { ...item, key, pos };
+                    const { children } = item;
+                    if (children && children.length) {
+                        loop(children, pos);
+                    }
+                    this._k2n[key] = this._p2n[pos] = newItem;
+                });
             loop(props.dataSource);
         } else if ('children' in props) {
-            const loop = (children, prefix = '0') => Children.map(children, (node, index) => {
-                const pos = `${prefix}-${index}`;
-                let { key } = node;
-                key = key || pos;
-                const newItem = { ...node.props, key, pos };
+            const loop = (children, prefix = '0') =>
+                Children.map(children, (node, index) => {
+                    if (!React.isValidElement(node)) {
+                        return;
+                    }
 
-                const { children } = node.props;
-                if (children && Children.count(children)) {
-                    newItem.children = loop(children, pos);
-                }
-                this._k2n[key] = this._p2n[pos] = newItem;
-                return newItem;
-            });
+                    const pos = `${prefix}-${index}`;
+                    let { key } = node;
+                    key = key || pos;
+                    const newItem = { ...node.props, key, pos };
+
+                    const { children } = node.props;
+                    if (children && Children.count(children)) {
+                        newItem.children = loop(children, pos);
+                    }
+                    this._k2n[key] = this._p2n[pos] = newItem;
+                    return newItem;
+                });
             loop(props.children);
         }
     }
@@ -351,7 +367,10 @@ export default class Tree extends Component {
     setFocusKey() {
         const { selectedKeys = [] } = this.state;
         this.setState({
-            focusedKey: selectedKeys.length > 0 ? selectedKeys[0] : this.getFirstAvaliablelChildKey('0')
+            focusedKey:
+                selectedKeys.length > 0
+                    ? selectedKeys[0]
+                    : this.getFirstAvaliablelChildKey('0'),
         });
     }
 
@@ -364,9 +383,12 @@ export default class Tree extends Component {
                 return children && children.length;
             });
         } else {
-            expandedKeys = 'expandedKeys' in props ?
-                props.expandedKeys :
-                willReceiveProps ? [] : props.defaultExpandedKeys;
+            expandedKeys =
+                'expandedKeys' in props
+                    ? props.expandedKeys
+                    : willReceiveProps
+                    ? []
+                    : props.defaultExpandedKeys;
             expandedKeys = normalizeToArray(expandedKeys);
 
             if (props.autoExpandParent) {
@@ -403,7 +425,9 @@ export default class Tree extends Component {
     }
 
     getAvailableKey(pos, prev) {
-        const ps = Object.keys(this._p2n).filter(p => this.isAvailablePos(pos, p));
+        const ps = Object.keys(this._p2n).filter(p =>
+            this.isAvailablePos(pos, p)
+        );
         if (ps.length > 1) {
             const index = ps.indexOf(pos);
             let targetIndex;
@@ -420,7 +444,9 @@ export default class Tree extends Component {
     }
 
     getFirstAvaliablelChildKey(parentPos) {
-        const pos = Object.keys(this._p2n).find(p => this.isAvailablePos(`${parentPos}-0`, p));
+        const pos = Object.keys(this._p2n).find(p =>
+            this.isAvailablePos(`${parentPos}-0`, p)
+        );
         return pos ? this._p2n[pos].key : null;
     }
 
@@ -434,9 +460,12 @@ export default class Tree extends Component {
         const currentNums = currentPos.split('-').slice(0, -1);
         const targetNums = targetPos.split('-').slice(0, -1);
 
-        return currentNums.length === targetNums.length && currentNums.every((num, index) => {
-            return num === targetNums[index];
-        });
+        return (
+            currentNums.length === targetNums.length &&
+            currentNums.every((num, index) => {
+                return num === targetNums[index];
+            })
+        );
     }
 
     getParentKey(pos) {
@@ -444,9 +473,12 @@ export default class Tree extends Component {
     }
 
     getSelectedKeys(props, willReceiveProps) {
-        let selectedKeys = 'selectedKeys' in props ?
-            props.selectedKeys :
-            willReceiveProps ? [] : props.defaultSelectedKeys;
+        let selectedKeys =
+            'selectedKeys' in props
+                ? props.selectedKeys
+                : willReceiveProps
+                ? []
+                : props.defaultSelectedKeys;
         selectedKeys = normalizeToArray(selectedKeys);
 
         const newSelectKeys = selectedKeys.filter(key => {
@@ -456,9 +488,12 @@ export default class Tree extends Component {
     }
 
     getCheckedKeys(props, willReceiveProps) {
-        let checkedKeys = 'checkedKeys' in props ?
-            props.checkedKeys :
-            willReceiveProps ? [] : props.defaultCheckedKeys;
+        let checkedKeys =
+            'checkedKeys' in props
+                ? props.checkedKeys
+                : willReceiveProps
+                ? []
+                : props.defaultCheckedKeys;
 
         const { checkStrictly } = this.props;
         if (checkStrictly) {
@@ -488,10 +523,17 @@ export default class Tree extends Component {
     }
     /*eslint-disable max-statements*/
     handleItemKeyDown(key, item, e) {
-        if ([
-            KEYCODE.UP, KEYCODE.DOWN, KEYCODE.RIGHT, KEYCODE.LEFT,
-            KEYCODE.ENTER, KEYCODE.ESC, KEYCODE.SPACE
-        ].indexOf(e.keyCode) > -1) {
+        if (
+            [
+                KEYCODE.UP,
+                KEYCODE.DOWN,
+                KEYCODE.RIGHT,
+                KEYCODE.LEFT,
+                KEYCODE.ENTER,
+                KEYCODE.ESC,
+                KEYCODE.SPACE,
+            ].indexOf(e.keyCode) > -1
+        ) {
             e.preventDefault();
             e.stopPropagation();
         }
@@ -541,8 +583,10 @@ export default class Tree extends Component {
 
             case KEYCODE.ENTER:
             case KEYCODE.SPACE: {
-                const checkable = item.props.checkable === true || this.props.checkable;
-                const selectable = item.props.selectable === true || this.props.selectable;
+                const checkable =
+                    item.props.checkable === true || this.props.checkable;
+                const selectable =
+                    item.props.selectable === true || this.props.selectable;
 
                 if (checkable) {
                     this.handleCheck(!item.props.checked, key, node);
@@ -561,7 +605,7 @@ export default class Tree extends Component {
         if (focusedKey !== this.state.focusedKey) {
             if (!('focusedKey' in this.props)) {
                 this.setState({
-                    focusedKey
+                    focusedKey,
                 });
             }
         }
@@ -572,7 +616,7 @@ export default class Tree extends Component {
 
     handleBlur(e) {
         this.setState({
-            focusedKey: ''
+            focusedKey: '',
         });
 
         this.props.onBlur && this.props.onBlur(e);
@@ -613,7 +657,7 @@ export default class Tree extends Component {
         onSelect(selectedKeys, {
             selectedNodes: this.getNodes(selectedKeys),
             node,
-            selected: select
+            selected: select,
         });
     }
 
@@ -624,10 +668,12 @@ export default class Tree extends Component {
 
         if (checkStrictly) {
             this.processKey(checkedKeys, key, check);
-            const newCheckedKeys = isPlainObject(this.props.checkedKeys) ? {
-                checked: checkedKeys,
-                indeterminate: this.indeterminateKeys
-            } : checkedKeys;
+            const newCheckedKeys = isPlainObject(this.props.checkedKeys)
+                ? {
+                      checked: checkedKeys,
+                      indeterminate: this.indeterminateKeys,
+                  }
+                : checkedKeys;
 
             onCheck(newCheckedKeys, {
                 checkedNodes: this.getNodes(checkedKeys),
@@ -637,7 +683,7 @@ export default class Tree extends Component {
                 }),
                 node,
                 indeterminateKeys: this.indeterminateKeys,
-                checked: check
+                checked: check,
             });
 
             return;
@@ -683,7 +729,7 @@ export default class Tree extends Component {
         const indeterminateKeys = this.getIndeterminateKeys(checkedKeys);
         if (!('checkedKeys' in this.props)) {
             this.setState({
-                checkedKeys
+                checkedKeys,
             });
             this.indeterminateKeys = indeterminateKeys;
         }
@@ -709,13 +755,18 @@ export default class Tree extends Component {
             }),
             node,
             indeterminateKeys,
-            checked: check
+            checked: check,
         });
     }
     /*eslint-enable*/
     getNodeProps(key) {
         const { prefix } = this.props;
-        const { expandedKeys, selectedKeys, checkedKeys, dragOverNodeKey } = this.state;
+        const {
+            expandedKeys,
+            selectedKeys,
+            checkedKeys,
+            dragOverNodeKey,
+        } = this.state;
         const pos = this._k2n[key].pos;
 
         return {
@@ -729,12 +780,16 @@ export default class Tree extends Component {
             indeterminate: this.indeterminateKeys.indexOf(key) > -1,
             dragOver: dragOverNodeKey === key && this.dropPosition === 0,
             dragOverGapTop: dragOverNodeKey === key && this.dropPosition === -1,
-            dragOverGapBottom: dragOverNodeKey === key && this.dropPosition === 1
+            dragOverGapBottom:
+                dragOverNodeKey === key && this.dropPosition === 1,
         };
     }
 
     getParentNode(pos) {
-        const parentPos = pos.split('-').slice(0, -1).join('-');
+        const parentPos = pos
+            .split('-')
+            .slice(0, -1)
+            .join('-');
         if (parentPos.length === 1) {
             return null;
         }
@@ -749,7 +804,9 @@ export default class Tree extends Component {
     getIndeterminateKeys(checkedKeys) {
         const indeterminateKeys = [];
 
-        const poss = filterChildKey(checkedKeys, this._k2n).map(key => this._k2n[key].pos);
+        const poss = filterChildKey(checkedKeys, this._k2n).map(
+            key => this._k2n[key].pos
+        );
         poss.forEach(pos => {
             const nums = pos.split('-');
             for (let i = nums.length; i > 2; i--) {
@@ -768,39 +825,54 @@ export default class Tree extends Component {
         const dragNodeKey = node.props.eventKey;
         this.dragNode = node;
         this.dragNodesKeys = Object.keys(this._k2n).filter(k => {
-            return isDescendantOrSelf(this._k2n[dragNodeKey].pos, this._k2n[k].pos);
+            return isDescendantOrSelf(
+                this._k2n[dragNodeKey].pos,
+                this._k2n[k].pos
+            );
         });
 
-        const expandedKeys = this.processKey([...this.state.expandedKeys], dragNodeKey, false);
+        const expandedKeys = this.processKey(
+            [...this.state.expandedKeys],
+            dragNodeKey,
+            false
+        );
         this.setState({ expandedKeys });
 
         this.props.onDragStart({
             event: e,
             node,
-            expandedKeys
+            expandedKeys,
         });
     }
 
     handleDragEnter(e, node) {
         const dragOverNodeKey = node.props.eventKey;
         this.dropPosition = this.getDropPosition(e, node);
-        if (this.dragNode && this.dragNode.props.eventKey === dragOverNodeKey && this.dropPosition === 0) {
+        if (
+            this.dragNode &&
+            this.dragNode.props.eventKey === dragOverNodeKey &&
+            this.dropPosition === 0
+        ) {
             this.setState({
-                dragOverNodeKey: null
+                dragOverNodeKey: null,
             });
             return;
         }
 
-        const expandedKeys = this.processKey([...this.state.expandedKeys], dragOverNodeKey, true);
+        const expandedKeys = this.processKey(
+            [...this.state.expandedKeys],
+            dragOverNodeKey,
+            true
+        );
         this.setState({
             dragOverNodeKey,
-            expandedKeys
+            expandedKeys,
         });
 
         this.props.onDragEnter({
             event: e,
             node,
-            expandedKeys
+            expandedKeys,
         });
     }
 
@@ -830,25 +902,31 @@ export default class Tree extends Component {
 
     handleDragEnd(e, node) {
         this.setState({
-            dragOverNodeKey: null
+            dragOverNodeKey: null,
         });
 
         this.props.onDragEnd({ event: e, node: node });
     }
 
     handleDrop(e, node) {
-        if (this.dragNode && isDescendantOrSelf(this._k2n[this.dragNode.props.eventKey].pos, this._k2n[node.props.eventKey].pos)) {
+        if (
+            this.dragNode &&
+            isDescendantOrSelf(
+                this._k2n[this.dragNode.props.eventKey].pos,
+                this._k2n[node.props.eventKey].pos
+            )
+        ) {
             return;
         }
 
         this.setState({
-            dragOverNodeKey: null
+            dragOverNodeKey: null,
         });
 
         const params = this.generateDropParams(node);
         this.props.onDrop({
             event: e,
-            ...params
+            ...params,
         });
     }
 
@@ -862,7 +940,7 @@ export default class Tree extends Component {
             dragNode: this.dragNode,
             dragNodesKeys: [...this.dragNodesKeys],
             node,
-            dropPosition: this.dropPosition
+            dropPosition: this.dropPosition,
         };
     }
 
@@ -879,7 +957,7 @@ export default class Tree extends Component {
                 const props = {
                     ...others,
                     ...this.getNodeProps(`${key}`),
-                    _key: key
+                    _key: key,
                 };
                 if (children && children.length) {
                     props.children = loop(children, pos);
@@ -897,6 +975,9 @@ export default class Tree extends Component {
         const { rtl } = this.props;
         const loop = (children, prefix = '0') => {
             return Children.map(children, (child, index) => {
+                if (!React.isValidElement(child)) {
+                    return;
+                }
                 const pos = `${prefix}-${index}`;
                 const key = child.key || pos;
                 const props = this.getNodeProps(`${key}`);
@@ -917,7 +998,15 @@ export default class Tree extends Component {
     }
 
     render() {
-        const { prefix, rtl, className, dataSource, showLine, isNodeBlock, isLabelBlock } = this.props;
+        const {
+            prefix,
+            rtl,
+            className,
+            dataSource,
+            showLine,
+            isNodeBlock,
+            isLabelBlock,
+        } = this.props;
         const others = pickOthers(Object.keys(Tree.propTypes), this.props);
 
         if (rtl) {
@@ -930,12 +1019,19 @@ export default class Tree extends Component {
             [`${prefix}node-block`]: isNodeBlock,
             [`${prefix}node-indent`]: !isNodeBlock,
             [`${prefix}show-line`]: !isNodeBlock && showLine,
-            [className]: !!className
+            [className]: !!className,
         });
 
         return (
-            <ul role="tree" onBlur={this.handleBlur} className={newClassName} {...others}>
-                {dataSource ? this.renderByDataSource() : this.renderByChildren()}
+            <ul
+                role="tree"
+                onBlur={this.handleBlur}
+                className={newClassName}
+                {...others}
+            >
+                {dataSource
+                    ? this.renderByDataSource()
+                    : this.renderByChildren()}
             </ul>
         );
     }
diff --git a/test/tree/a11y-spec.js b/test/tree/a11y-spec.js
index 6477c1fde6..32619c9bf9 100644
--- a/test/tree/a11y-spec.js
+++ b/test/tree/a11y-spec.js
@@ -3,34 +3,43 @@ import Enzyme from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import Tree from '../../src/tree/index';
 import '../../src/tree/style.js';
-import { afterEach as a11yAfterEach, testReact } from '../util/a11y/validate';
+import { unmount, testReact } from '../util/a11y/validate';
 
 Enzyme.configure({ adapter: new Adapter() });
 
-
-const dataSource = [{
-    label: '服装',
-    key: '1',
-    children: [{
-        label: '男装',
-        key: '2',
-        disabled: true,
-        children: [{
-            label: '外套',
-            key: '4'
-        }, {
-            label: '夹克',
-            key: '5'
-        }]
-    }, {
-        label: '女装',
-        key: '3',
-        children: [{
-            label: '裙子',
-            key: '6'
-        }]
-    }]
-}];
+const dataSource = [
+    {
+        label: '服装',
+        key: '1',
+        children: [
+            {
+                label: '男装',
+                key: '2',
+                disabled: true,
+                children: [
+                    {
+                        label: '外套',
+                        key: '4',
+                    },
+                    {
+                        label: '夹克',
+                        key: '5',
+                    },
+                ],
+            },
+            {
+                label: '女装',
+                key: '3',
+                children: [
+                    {
+                        label: '裙子',
+                        key: '6',
+                    },
+                ],
+            },
+        ],
+    },
+];
 
 /* eslint-disable no-undef, react/jsx-filename-extension */
 describe('Tree A11y', () => {
@@ -41,21 +50,35 @@ describe('Tree A11y', () => {
             wrapper.unmount();
             wrapper = null;
         }
-        a11yAfterEach();
+        unmount();
     });
 
     it('should not have any violations for default Tree', async () => {
-        wrapper = await testReact(<Tree defaultExpandAll dataSource={dataSource} />, { incomplete: true });
+        wrapper = await testReact(
+            <Tree defaultExpandAll dataSource={dataSource} />,
+            { incomplete: true }
+        );
         return wrapper;
     });
 
     it('should not have any violations for line Tree', async () => {
-        wrapper = await testReact(<Tree defaultExpandAll showLine dataSource={dataSource} />, { incomplete: true });
+        wrapper = await testReact(
+            <Tree defaultExpandAll showLine dataSource={dataSource} />,
+            { incomplete: true }
+        );
         return wrapper;
     });
 
     it('should not have any violations for checkable Tree', async () => {
-        wrapper = await testReact(<Tree defaultExpandAll checkable showLine dataSource={dataSource} />, { incomplete: true });
+        wrapper = await testReact(
+            <Tree
+                defaultExpandAll
+                checkable
+                showLine
+                dataSource={dataSource}
+            />,
+            { incomplete: true }
+        );
         return wrapper;
     });
 });
diff --git a/test/tree/index-spec.js b/test/tree/index-spec.js
index 18e4a0b2f6..2c2d1bdc04 100644
--- a/test/tree/index-spec.js
+++ b/test/tree/index-spec.js
@@ -12,81 +12,109 @@ import '../../src/tree/style.js';
 const TreeNode = Tree.Node;
 const { hasClass, getOffset } = dom;
 
-const dataSource = [{
-    label: '服装',
-    key: '1',
-    children: [{
-        label: '男装',
-        key: '2',
-        disabled: true,
-        children: [{
-            label: '外套',
-            key: '4'
-        }, {
-            label: '夹克',
-            key: '5'
-        }]
-    }, {
-        label: '女装',
-        key: '3',
-        children: [{
-            label: '裙子',
-            key: '6'
-        }]
-    }]
-}];
+const dataSource = [
+    {
+        label: '服装',
+        key: '1',
+        children: [
+            {
+                label: '男装',
+                key: '2',
+                disabled: true,
+                children: [
+                    {
+                        label: '外套',
+                        key: '4',
+                    },
+                    {
+                        label: '夹克',
+                        key: '5',
+                    },
+                ],
+            },
+            {
+                label: '女装',
+                key: '3',
+                children: [
+                    {
+                        label: '裙子',
+                        key: '6',
+                    },
+                ],
+            },
+        ],
+    },
+];
 const _k2n = createMap(dataSource);
 
 class ExpandDemo extends Component {
     state = {
-        expandedKeys: ['2']
+        expandedKeys: ['2'],
     };
 
     handleExpand = expandedKeys => {
         this.setState({
-            expandedKeys
+            expandedKeys,
         });
-    }
+    };
 
     render() {
         return (
-            <Tree expandedKeys={this.state.expandedKeys} dataSource={dataSource} onExpand={this.handleExpand} />
+            <Tree
+                expandedKeys={this.state.expandedKeys}
+                dataSource={dataSource}
+                onExpand={this.handleExpand}
+            />
         );
     }
 }
 
 class SelectDemo extends Component {
     state = {
-        selectedKeys: ['1']
+        selectedKeys: ['1'],
     };
 
     handleSelect = selectedKeys => {
         this.setState({
-            selectedKeys
+            selectedKeys,
         });
-    }
+    };
 
     render() {
         return (
-            <Tree defaultExpandAll multiple selectedKeys={this.state.selectedKeys} dataSource={dataSource} onSelect={this.handleSelect} {...this.props} />
+            <Tree
+                defaultExpandAll
+                multiple
+                selectedKeys={this.state.selectedKeys}
+                dataSource={dataSource}
+                onSelect={this.handleSelect}
+                {...this.props}
+            />
         );
     }
 }
 
 class CheckDemo extends Component {
     state = {
-        checkedKeys: ['4', '5', '6']
+        checkedKeys: ['4', '5', '6'],
     };
 
     handleCheck = checkedKeys => {
         this.setState({
-            checkedKeys
+            checkedKeys,
         });
-    }
+    };
 
     render() {
         return (
-            <Tree defaultExpandAll checkable checkedKeys={this.state.checkedKeys} dataSource={dataSource} onCheck={this.handleCheck} {...this.props} />
+            <Tree
+                defaultExpandAll
+                checkable
+                checkedKeys={this.state.checkedKeys}
+                dataSource={dataSource}
+                onCheck={this.handleCheck}
+                {...this.props}
+            />
         );
     }
 }
@@ -96,7 +124,7 @@ class DragDemo extends React.Component {
         super(props);
 
         this.state = {
-            gData: cloneData(dataSource)
+            gData: cloneData(dataSource),
         };
     }
 
@@ -121,7 +149,7 @@ class DragDemo extends React.Component {
             dragObj = item;
         });
         if (info.dropPosition === 0) {
-            loop(data, dropKey, (item) => {
+            loop(data, dropKey, item => {
                 item.children = item.children || [];
                 item.children.push(dragObj);
             });
@@ -144,32 +172,44 @@ class DragDemo extends React.Component {
     }
     render() {
         return (
-            <Tree draggable selectable={false} defaultExpandAll dataSource={this.state.gData} onDrop={this.onDrop.bind(this)} />
+            <Tree
+                draggable
+                selectable={false}
+                defaultExpandAll
+                dataSource={this.state.gData}
+                onDrop={this.onDrop.bind(this)}
+            />
         );
     }
 }
 
 class AsyncDemo extends Component {
     state = {
-        data: [{
-            label: '服装',
-            key: '1'
-        }]
-    }
+        data: [
+            {
+                label: '服装',
+                key: '1',
+            },
+        ],
+    };
 
     loadData = () => {
-        return new Promise((resolve) => {
+        return new Promise(resolve => {
             setTimeout(() => {
                 this.setState({
-                    data: [{
-                        label: '服装',
-                        key: '1',
-                        children: [{
-                            label: '男装',
-                            key: '2',
-                            isLeaf: true
-                        }]
-                    }]
+                    data: [
+                        {
+                            label: '服装',
+                            key: '1',
+                            children: [
+                                {
+                                    label: '男装',
+                                    key: '2',
+                                    isLeaf: true,
+                                },
+                            ],
+                        },
+                    ],
                 });
                 resolve();
             }, 200);
@@ -195,14 +235,49 @@ describe('Tree', () => {
     });
 
     it('should render by children', () => {
-        const loop = data => data.map(item => {
-            // eslint-disable-next-line
-            return <TreeNode {...item}>{item.children ? loop(item.children) : null}</TreeNode>;
-        });
+        const loop = data =>
+            data.map(item => {
+                // eslint-disable-next-line
+                return (
+                    <TreeNode {...item}>
+                        {item.children ? loop(item.children) : null}
+                    </TreeNode>
+                );
+            });
 
         assertTree({ children: loop(dataSource) }, mountNode);
     });
 
+    it('should ignore children contain null or string', () => {
+        ReactDOM.render(
+            <Tree
+                checkable
+                editable
+                defaultExpandAll
+                defaultSelectedKeys={['1']}
+                defaultCheckedKeys={['3']}
+            >
+                <TreeNode key="1" label="Component">
+                    <TreeNode key="2" label="Form" selectable={false}>
+                        <TreeNode key="4" label="Input" />
+                        <TreeNode key="5" label="Select" disabled />
+                    </TreeNode>
+                    <TreeNode key="3" label="Display">
+                        <TreeNode key="6" label="Table" />
+                    </TreeNode>
+                </TreeNode>
+            </Tree>,
+            mountNode
+        );
+
+        assert(
+            hasClass(
+                findTreeNodeByKey('5').querySelector('.next-checkbox-wrapper'),
+                'disabled'
+            )
+        );
+    });
+
     it('should render by dataSource', () => {
         assertTree({ dataSource }, mountNode);
     });
@@ -216,7 +291,14 @@ describe('Tree', () => {
             assert(extra.expanded);
         };
 
-        ReactDOM.render(<Tree defaultExpandedKeys={['2']} dataSource={dataSource} onExpand={handleExpand} />, mountNode);
+        ReactDOM.render(
+            <Tree
+                defaultExpandedKeys={['2']}
+                dataSource={dataSource}
+                onExpand={handleExpand}
+            />,
+            mountNode
+        );
         assertExpanded('2', true);
         assertExpanded('3', false);
 
@@ -255,9 +337,17 @@ describe('Tree', () => {
         };
 
         const newDataSource = cloneData(dataSource, {
-            5: { selectable: false }
+            5: { selectable: false },
         });
-        ReactDOM.render(<Tree defaultExpandAll defaultSelectedKeys={['1']} dataSource={newDataSource} onSelect={handleSelect} />, mountNode);
+        ReactDOM.render(
+            <Tree
+                defaultExpandAll
+                defaultSelectedKeys={['1']}
+                dataSource={newDataSource}
+                onSelect={handleSelect}
+            />,
+            mountNode
+        );
         assertSelected('1', true);
 
         selectTreeNode('2');
@@ -306,16 +396,34 @@ describe('Tree', () => {
 
         const newDataSource = cloneData(dataSource, {
             4: { checkboxDisabled: true },
-            5: { checkable: false }
+            5: { checkable: false },
         });
 
-        ReactDOM.render(<Tree checkable defaultExpandAll defaultCheckedKeys={['3']} dataSource={newDataSource} onCheck={handleCheck} />, mountNode);
+        ReactDOM.render(
+            <Tree
+                checkable
+                defaultExpandAll
+                defaultCheckedKeys={['3']}
+                dataSource={newDataSource}
+                onCheck={handleCheck}
+            />,
+            mountNode
+        );
         assertChecked('3', true);
         assertChecked('6', true);
         assertChecked('1', false);
         assertIndeterminate('1', true);
-        assert(hasClass(findTreeNodeByKey('4').querySelector('.next-checkbox-wrapper'), 'disabled'));
-        assert(!findTreeNodeByKey('5').querySelector('.next-tree-node-inner').querySelector('.next-checkbox-wrapper'));
+        assert(
+            hasClass(
+                findTreeNodeByKey('4').querySelector('.next-checkbox-wrapper'),
+                'disabled'
+            )
+        );
+        assert(
+            !findTreeNodeByKey('5')
+                .querySelector('.next-tree-node-inner')
+                .querySelector('.next-checkbox-wrapper')
+        );
 
         checkTreeNode('2');
         assert(!called);
@@ -340,7 +448,15 @@ describe('Tree', () => {
             assert.deepEqual(checkedKeys, ['6', '3']);
         };
 
-        ReactDOM.render(<Tree checkable defaultExpandAll dataSource={dataSource} onCheck={handleCheck} />, mountNode);
+        ReactDOM.render(
+            <Tree
+                checkable
+                defaultExpandAll
+                dataSource={dataSource}
+                onCheck={handleCheck}
+            />,
+            mountNode
+        );
 
         checkTreeNode('6');
         assert(called);
@@ -353,7 +469,16 @@ describe('Tree', () => {
             assert.deepEqual(checkedKeys, ['3']);
         };
 
-        ReactDOM.render(<Tree checkable checkedStrategy="parent" defaultExpandAll dataSource={dataSource} onCheck={handleCheck} />, mountNode);
+        ReactDOM.render(
+            <Tree
+                checkable
+                checkedStrategy="parent"
+                defaultExpandAll
+                dataSource={dataSource}
+                onCheck={handleCheck}
+            />,
+            mountNode
+        );
 
         checkTreeNode('6');
         assert(called);
@@ -366,7 +491,16 @@ describe('Tree', () => {
             assert.deepEqual(checkedKeys, ['6']);
         };
 
-        ReactDOM.render(<Tree checkable checkedStrategy="child" defaultExpandAll dataSource={dataSource} onCheck={handleCheck} />, mountNode);
+        ReactDOM.render(
+            <Tree
+                checkable
+                checkedStrategy="child"
+                defaultExpandAll
+                dataSource={dataSource}
+                onCheck={handleCheck}
+            />,
+            mountNode
+        );
 
         checkTreeNode('6');
         assert(called);
@@ -377,7 +511,9 @@ describe('Tree', () => {
         ['1', '2', '3', '4', '5', '6'].forEach(key => assertChecked(key, true));
 
         checkTreeNode('1');
-        ['1', '2', '3', '4', '5', '6'].forEach(key => assertChecked(key, false));
+        ['1', '2', '3', '4', '5', '6'].forEach(key =>
+            assertChecked(key, false)
+        );
 
         checkTreeNode('5');
         assertChecked('5', true);
@@ -425,10 +561,18 @@ describe('Tree', () => {
         };
 
         const newDataSource = cloneData(dataSource, {
-            5: { editable: false }
+            5: { editable: false },
         });
 
-        ReactDOM.render(<Tree defaultExpandAll editable dataSource={newDataSource} onEditFinish={handleEditFinish} />, mountNode);
+        ReactDOM.render(
+            <Tree
+                defaultExpandAll
+                editable
+                dataSource={newDataSource}
+                onEditFinish={handleEditFinish}
+            />,
+            mountNode
+        );
         const treeNode3 = findTreeNodeByKey('3');
 
         editTreeNode('2');
@@ -444,7 +588,6 @@ describe('Tree', () => {
         ReactTestUtils.Simulate.keyDown(input, { keyCode: KEYCODE.ENTER });
         assert(called);
 
-
         editTreeNode('3');
         input = treeNode3.querySelector('.next-tree-node-input input');
         ReactTestUtils.Simulate.change(input, { target: { value: '童装' } });
@@ -459,7 +602,14 @@ describe('Tree', () => {
             assert(info.node.props.eventKey === '3');
         };
 
-        ReactDOM.render(<Tree defaultExpandAll dataSource={dataSource} onRightClick={handleRightClick} />, mountNode);
+        ReactDOM.render(
+            <Tree
+                defaultExpandAll
+                dataSource={dataSource}
+                onRightClick={handleRightClick}
+            />,
+            mountNode
+        );
 
         rightClickTreeNode('2');
         assert(!called);
@@ -471,30 +621,52 @@ describe('Tree', () => {
         ReactDOM.render(<DragDemo />, mountNode);
 
         dragTreeNode('6', '2', 0);
-        assert(findChild(findTreeNodeByKey('2'), 'next-tree-child-tree').children[2].querySelector('.next-tree-node-label').textContent.trim() === '裙子');
+        assert(
+            findChild(findTreeNodeByKey('2'), 'next-tree-child-tree')
+                .children[2].querySelector('.next-tree-node-label')
+                .textContent.trim() === '裙子'
+        );
     });
 
     it('should support dragging node before drop mode', () => {
         ReactDOM.render(<DragDemo />, mountNode);
 
         dragTreeNode('6', '2', -1);
-        assert(findChild(findTreeNodeByKey('1'), 'next-tree-child-tree').children[0].querySelector('.next-tree-node-label').textContent.trim() === '裙子');
+        assert(
+            findChild(findTreeNodeByKey('1'), 'next-tree-child-tree')
+                .children[0].querySelector('.next-tree-node-label')
+                .textContent.trim() === '裙子'
+        );
     });
 
     it('should support dragging node after drop node', () => {
         ReactDOM.render(<DragDemo />, mountNode);
 
         dragTreeNode('6', '2', 1);
-        assert(findChild(findTreeNodeByKey('1'), 'next-tree-child-tree').children[1].querySelector('.next-tree-node-label').textContent.trim() === '裙子');
+        assert(
+            findChild(findTreeNodeByKey('1'), 'next-tree-child-tree')
+                .children[1].querySelector('.next-tree-node-label')
+                .textContent.trim() === '裙子'
+        );
     });
 
     it('should load data asynchronously', done => {
         ReactDOM.render(<AsyncDemo />, mountNode);
         expandChildTree('1');
-        assert(hasClass(findTreeNodeByKey('1').querySelector('.next-tree-switcher'), 'next-loading'));
+        assert(
+            hasClass(
+                findTreeNodeByKey('1').querySelector('.next-tree-switcher'),
+                'next-loading'
+            )
+        );
 
         setTimeout(() => {
-            assert(!hasClass(findTreeNodeByKey('1').querySelector('.next-tree-switcher'), 'next-loading'));
+            assert(
+                !hasClass(
+                    findTreeNodeByKey('1').querySelector('.next-tree-switcher'),
+                    'next-loading'
+                )
+            );
             assertExpanded('1', true);
             done();
         }, 500);
@@ -502,27 +674,47 @@ describe('Tree', () => {
 
     it('should support showLine', () => {
         ReactDOM.render(<Tree showLine dataSource={dataSource} />, mountNode);
-        assert(hasClass(document.querySelector('.next-tree'), 'next-show-line'));
+        assert(
+            hasClass(document.querySelector('.next-tree'), 'next-show-line')
+        );
     });
 
     it('should support isLabelBlock and isNodeBlock', () => {
-        ReactDOM.render(<Tree isLabelBlock isNodeBlock dataSource={dataSource} />, mountNode);
-        assert(hasClass(document.querySelector('.next-tree'), 'next-node-block'));
-        assert(hasClass(document.querySelector('.next-tree'), 'next-label-block'));
+        ReactDOM.render(
+            <Tree isLabelBlock isNodeBlock dataSource={dataSource} />,
+            mountNode
+        );
+        assert(
+            hasClass(document.querySelector('.next-tree'), 'next-node-block')
+        );
+        assert(
+            hasClass(document.querySelector('.next-tree'), 'next-label-block')
+        );
     });
 
     it('should support filterTreeNode', () => {
-        ReactDOM.render(<Tree dataSource={dataSource} filterTreeNode={node => node.props.label === '服装'} />, mountNode);
+        ReactDOM.render(
+            <Tree
+                dataSource={dataSource}
+                filterTreeNode={node => node.props.label === '服装'}
+            />,
+            mountNode
+        );
 
         assert(hasClass(findTreeNodeByKey('1'), 'next-filtered'));
     });
 
     it('should support keyboard', () => {
-        ReactDOM.render(<Tree dataSource={cloneData(dataSource, {
-            2: {
-                disabled: false
-            }
-        })} />, mountNode);
+        ReactDOM.render(
+            <Tree
+                dataSource={cloneData(dataSource, {
+                    2: {
+                        disabled: false,
+                    },
+                })}
+            />,
+            mountNode
+        );
         const item00 = findRealItem(0, 0);
         item00.focus();
         assert(document.activeElement === item00);
@@ -534,40 +726,55 @@ describe('Tree', () => {
     });
 
     it('should support rtl', () => {
-        ReactDOM.render(<Tree rtl dataSource={cloneData(dataSource, {
-            2: {
-                disabled: false
-            }
-        })} />, mountNode);
+        ReactDOM.render(
+            <Tree
+                rtl
+                dataSource={cloneData(dataSource, {
+                    2: {
+                        disabled: false,
+                    },
+                })}
+            />,
+            mountNode
+        );
         assert(document.querySelector('.next-tree').dir === 'rtl');
     });
 });
 
 function assertTree(props, mountNode) {
     ReactDOM.render(
-        <Tree checkable editable
+        <Tree
+            checkable
+            editable
             defaultExpandAll
             defaultSelectedKeys={['1']}
             defaultCheckedKeys={['3']}
-            {...props} />,
+            {...props}
+        />,
         mountNode
     );
 
     assertDataAndNodes(dataSource);
-    assert(hasClass(findTreeNodeByKey('2').querySelector('.next-tree-node-inner'), 'next-disabled'));
+    assert(
+        hasClass(
+            findTreeNodeByKey('2').querySelector('.next-tree-node-inner'),
+            'next-disabled'
+        )
+    );
 }
 
 function assertDataAndNodes(dataSource) {
-    const loop = (data, nodes) => data.forEach((item, index) => {
-        const node = nodes[index];
-        const labelElement = findChild(node, 'next-tree-node-inner');
-        assert(labelElement.textContent.trim() === item.label);
-
-        if (item.children) {
-            const childTree = findChild(node, 'next-tree-child-tree');
-            loop(item.children, childTree.children);
-        }
-    });
+    const loop = (data, nodes) =>
+        data.forEach((item, index) => {
+            const node = nodes[index];
+            const labelElement = findChild(node, 'next-tree-node-inner');
+            assert(labelElement.textContent.trim() === item.label);
+
+            if (item.children) {
+                const childTree = findChild(node, 'next-tree-child-tree');
+                loop(item.children, childTree.children);
+            }
+        });
     loop(dataSource, document.querySelector('.next-tree').children);
 }
 
@@ -581,9 +788,14 @@ function findChild(node, className) {
 }
 
 function findTreeNodeByPos(pos) {
-    return pos.split('-').slice(1).reduce((ret, num, i) => {
-        return ret.querySelector(i === 0 ? '.next-tree' : '.next-tree-child-tree').children[num];
-    }, document);
+    return pos
+        .split('-')
+        .slice(1)
+        .reduce((ret, num, i) => {
+            return ret.querySelector(
+                i === 0 ? '.next-tree' : '.next-tree-child-tree'
+            ).children[num];
+        }, document);
 }
 
 function findTreeNodeByKey(key) {
@@ -593,63 +805,79 @@ function findTreeNodeByKey(key) {
 function createMap(data) {
     const map = {};
 
-    const loop = (data, prefix = '0') => data.forEach((item, index) => {
-        const { key, children } = item;
-        const pos = `${prefix}-${index}`;
-        map[key] = { ...item, pos };
-        if (children && children.length) {
-            loop(children, pos);
-        }
-    });
+    const loop = (data, prefix = '0') =>
+        data.forEach((item, index) => {
+            const { key, children } = item;
+            const pos = `${prefix}-${index}`;
+            map[key] = { ...item, pos };
+            if (children && children.length) {
+                loop(children, pos);
+            }
+        });
     loop(data);
 
     return map;
 }
 
 function cloneData(data, keyMap = {}) {
-    const loop = data => data.map(item => {
-        let newItem;
+    const loop = data =>
+        data.map(item => {
+            let newItem;
 
-        if (item.key in keyMap) {
-            newItem = { ...item, ...keyMap[item.key] };
-        } else {
-            newItem = { ...item };
-        }
-        if (newItem.children) {
-            newItem.children = loop(newItem.children);
-        }
+            if (item.key in keyMap) {
+                newItem = { ...item, ...keyMap[item.key] };
+            } else {
+                newItem = { ...item };
+            }
+            if (newItem.children) {
+                newItem.children = loop(newItem.children);
+            }
 
-        return newItem;
-    });
+            return newItem;
+        });
 
     return loop(data);
 }
 
 function expandChildTree(key) {
-    ReactTestUtils.Simulate.click(findTreeNodeByKey(key).querySelector('.next-tree-switcher'));
+    ReactTestUtils.Simulate.click(
+        findTreeNodeByKey(key).querySelector('.next-tree-switcher')
+    );
 }
 
 function selectTreeNode(key) {
-    ReactTestUtils.Simulate.click(findTreeNodeByKey(key).querySelector('.next-tree-node-label'));
+    ReactTestUtils.Simulate.click(
+        findTreeNodeByKey(key).querySelector('.next-tree-node-label')
+    );
 }
 
 function checkTreeNode(key) {
     const input = findTreeNodeByKey(key).querySelector('.next-checkbox input');
-    ReactTestUtils.Simulate.change(input, { target: { checked: input.checked } });
+    ReactTestUtils.Simulate.change(input, {
+        target: { checked: input.checked },
+    });
 }
 
 function editTreeNode(key) {
-    ReactTestUtils.Simulate.doubleClick(findTreeNodeByKey(key).querySelector('.next-tree-node-label'));
+    ReactTestUtils.Simulate.doubleClick(
+        findTreeNodeByKey(key).querySelector('.next-tree-node-label')
+    );
 }
 
 function rightClickTreeNode(key) {
-    ReactTestUtils.Simulate.contextMenu(findTreeNodeByKey(key).querySelector('.next-tree-node-label'));
+    ReactTestUtils.Simulate.contextMenu(
+        findTreeNodeByKey(key).querySelector('.next-tree-node-label')
+    );
 }
 
 function dragTreeNode(dragKey, dropKey, dropPosition) {
-    const dragNodeLabel = findTreeNodeByKey(dragKey).querySelector('.next-tree-node-label');
+    const dragNodeLabel = findTreeNodeByKey(dragKey).querySelector(
+        '.next-tree-node-label'
+    );
     const dropNode = findTreeNodeByKey(dropKey);
-    const dropNodeLabelWrapper = dropNode.querySelector('.next-tree-node-label-wrapper');
+    const dropNodeLabelWrapper = dropNode.querySelector(
+        '.next-tree-node-label-wrapper'
+    );
     const extra = dropPosition === -1 ? 0 : dropPosition === 0 ? 12 : 24;
     const pageY = getOffset(dropNodeLabelWrapper).top + extra;
 
@@ -661,19 +889,37 @@ function dragTreeNode(dragKey, dropKey, dropPosition) {
 }
 
 function assertExpanded(key, expanded) {
-    assert(!!findTreeNodeByKey(key).querySelector('.next-tree-child-tree') === expanded);
+    assert(
+        !!findTreeNodeByKey(key).querySelector('.next-tree-child-tree') ===
+            expanded
+    );
 }
 
 function assertSelected(key, selected) {
-    assert(hasClass(findTreeNodeByKey(key).querySelector('.next-tree-node-inner'), 'next-selected') === selected);
+    assert(
+        hasClass(
+            findTreeNodeByKey(key).querySelector('.next-tree-node-inner'),
+            'next-selected'
+        ) === selected
+    );
 }
 
 function assertChecked(key, checked) {
-    assert(hasClass(findTreeNodeByKey(key).querySelector('.next-checkbox-wrapper'), 'checked') === checked);
+    assert(
+        hasClass(
+            findTreeNodeByKey(key).querySelector('.next-checkbox-wrapper'),
+            'checked'
+        ) === checked
+    );
 }
 
 function assertIndeterminate(key, indeterminate) {
-    assert(hasClass(findTreeNodeByKey(key).querySelector('.next-checkbox-wrapper'), 'indeterminate') === indeterminate);
+    assert(
+        hasClass(
+            findTreeNodeByKey(key).querySelector('.next-checkbox-wrapper'),
+            'indeterminate'
+        ) === indeterminate
+    );
 }
 
 function assertEditing(key, editing) {
@@ -682,13 +928,14 @@ function assertEditing(key, editing) {
 
     if (editing) {
         const input = treeNode.querySelector('.next-tree-node-input input');
-        assert(!!input && input.value === label && document.activeElement === input);
+        assert(
+            !!input && input.value === label && document.activeElement === input
+        );
     } else {
         assert(findTreeNodeByKey(key).querySelector('.next-tree-node-label'));
     }
 }
 
-
 function assertActiveElement() {
     let activeElement = document.activeElement;
 
@@ -705,9 +952,14 @@ function getTreePath(listIndex, path = '') {
         return `.next-tree ${path}`;
     }
 
-    return getTreePath(listIndex - 1, ` > .next-tree-node > .next-tree-child-tree ${path}`);
+    return getTreePath(
+        listIndex - 1,
+        ` > .next-tree-node > .next-tree-child-tree ${path}`
+    );
 }
 
 function findRealItem(listIndex, itemIndex) {
-    return document.querySelectorAll(`${getTreePath(listIndex)} > .next-tree-node > .next-tree-node-inner`)[itemIndex];
+    return document.querySelectorAll(
+        `${getTreePath(listIndex)} > .next-tree-node > .next-tree-node-inner`
+    )[itemIndex];
 }