feat(tree): 利用getChildContext将Tree组件获取到的node节点通过context传给TreeNode组件

src/component/Tree/index.js

@@ -27,6 +27,31 @@ class Tree extends Component {
     ));
   }
 
+  getChildContext() {
+    const {} = this.props;
+
+    return {
+      tree: {
+        // root: this,
+
+        renderTreeNode: this.renderTreeNode,
+        isKeyChecked: this.isKeyChecked,
+
+        onNodeClick: this.onNodeClick,
+        onNodeSelect: this.onNodeSelect,
+        onNodeContextMenu: this.onNodeContextMenu,
+        onBatchNodeCheck: this.onBatchNodeCheck,
+        onCheckConductFinished: this.onCheckConductFinished,
+      }
+    }
+  }
+
+  onNodeClick = () => {}
+  onNodeSelect = () => {}
+  onNodeContextMenu = () => {}
+  onBatchNodeCheck = () => {}
+  onCheckConductFinished = () => {}
+
   getSyncProps = (props = {}, prevProps, preState) => {
     console.log('sync props: 同步数据给treenode');
     return null;
@@ -39,7 +64,6 @@ class Tree extends Component {
 
   renderTreeNode = (child, index, level = 0) => {
     console.log(child, index, level);
-    const me = this;
     const {
       selectedKeys = [], halfCheckedKeys = [],
     } = this.state;
@@ -48,7 +72,7 @@ class Tree extends Component {
 
     return React.cloneElement(child, {
       eventKey: key,
-      checked: me.isKeyChecked(key),
+      checked: this.isKeyChecked(key),
       halfChecked: halfCheckedKeys.indexOf(key) !== -1,
     });
   }

src/component/Tree/treeNode.js

@@ -1,5 +1,9 @@
 import React, { PropTypes, Component } from 'react';
 import classNames from 'classnames';
+import {
+  toArray,
+  getNodeChildren,
+} from './utils';
 import './index.css';
 
 class TreeNode extends Component {
@@ -10,7 +14,48 @@ class TreeNode extends Component {
   //   children: PropTypes.any
   // }
 
+  renderCheckbox = () => {
+    return (
+      <input type="checkbox" />
+    );
+  }
+
+  renderSelector = () => {
+    return (<div className="title-children">
+      {this.props.title}
+    </div>);
+  }
+
+  renderChildren = () => {
+    const { pos } = this.props;
+    const { renderTreeNode } = this.context;
+    console.log('this.context', this.context);
+
+    const nodeList = this.getNodeChildren();
+    if (nodeList.length === 0) {
+      return null;
+    }
+
+    return (<div className="children">
+      {
+        React.Children.map(nodeList, (node, index) => (
+          renderTreeNode(node, index, pos)
+        ))
+      }
+    </div>);
+  }
+
+  getNodeChildren = () => {
+    const { children } = this.props;
+    const originList = toArray(children).filter(node => node);
+    const targetList = getNodeChildren(originList);
+
+    return targetList;
+  }
+
   render() {
+    const { checked } = this.props;
+
     return (
       <div
         key={this.props.currentIndex}
@@ -19,15 +64,12 @@ class TreeNode extends Component {
           [this.props.className]: this.props.className
         })}
       >
+        {checked}
         <div className="title">
-          <input type="checkbox" />
-          <div className="title-children">
-            {this.props.title}
-          </div>
-        </div>
-        <div className="children">
-          {this.props.children}
+          {this.renderCheckbox()}
+          {this.renderSelector()}
         </div>
+        {this.renderChildren()}
       </div>
     );
   }

src/component/Tree/utils.js

@@ -0,0 +1,16 @@
+import { Children } from 'react';
+
+export const toArray = (myObj) => {
+  const array = myObj.map((value, index) => {
+    return [value];
+  });
+
+  console.log(array);
+  return array;
+}
+
+export const getNodeChildren = (children) => {
+  const childList = Array.isArray(children) ? children : [children];
+  return childList
+   .filter(child => child && child.type && child.type.isTreeNode);
+}