docs: translate tree component (#2395)

components/tree/demo/basic-controlled.md

@@ -1,10 +1,18 @@
 ---
 order: 1
-title: 受控操作示例
+title: 
+  zh-CN: 受控操作示例
+  en-US: basic controlled example
 ---
 
+## zh-CN
+
 受控操作示例
 
+## en-US
+
+basic controlled example
+
 ````jsx
 import { Tree } from 'antd';
 const TreeNode = Tree.TreeNode;

components/tree/demo/basic.md

@@ -1,10 +1,18 @@
 ---
 order: 0
-title: 基本
+title:
+  zh-CN: 基本
+  en-US: basic
 ---
 
+## zh-CN
+
 最简单的用法，展示可勾选，可选中，禁用，默认展开等功能。
 
+## en-US
+
+The most basic usage, tell you how to use checkable, selectable, disabled, defaultExpandKeys, and etc.
+
 ````jsx
 import { Tree } from 'antd';
 const TreeNode = Tree.TreeNode;

components/tree/demo/draggable.md

@@ -1,10 +1,18 @@
 ---
 order: 2
-title: 拖动示例
+title: 
+  zh-CN: 拖动示例
+  en-US: draggable
 ---
 
+## zh-CN
+
 将节点拖拽到其他节点内部或前后。
 
+## en-US
+
+Drag treeNode to insert after the other treeNode or insert into the other parent TreeNode.
+
 ````jsx
 import { Tree } from 'antd';
 const TreeNode = Tree.TreeNode;

components/tree/demo/dynamic.md

@@ -1,10 +1,18 @@
 ---
 order: 3
-title: 异步数据加载
+title: 
+  zh-CN: 异步数据加载
+  en-US: load data asynchronously
 ---
 
+## zh-CN
+
 点击展开节点，动态加载数据。
 
+## en-US
+
+To load data asynchronously when click to expand a treeNode.
+
 ````jsx
 import { Tree } from 'antd';
 const TreeNode = Tree.TreeNode;

components/tree/index.en-US.md

@@ -0,0 +1,49 @@
+---
+category: Components
+type: Views
+english: Tree
+---
+
+## When to use
+
+Directory, organization, biological classification, country, and etc. Almost things of the world are tree structrue. The `Tree` component is a way of representing the hierachical relationship of these things，and you also can expand, collapse, select the treeNodes of it.
+
+## API
+
+### Tree props
+
+| Property       | Description                                      | Type       | Default |
+|----------------|--------------------------------------------------|------------|---------|
+|multiple | Whether allow to multiple select treeNode | bool | false |
+|checkable | Whether support checkable treeNode | bool   | false    |
+|defaultExpandAll | Whether default to expand all treeNodes | bool | false |
+|defaultExpandedKeys | Specify keys of default expanded treeNodes | String[] | [] |
+|expandedKeys |(controlled) Sepcifies keys of expanded treeNodes | String[] | [] |
+|autoExpandParent | Whether to automatically expand a parent treeNode | bool | true |
+|defaultCheckedKeys | Specifies keys of default checked treeNodes | String[] | [] |
+|checkedKeys |(controlled) Specifies keys of checked treeNodes（PS： When specifies a key of treeNode which is a parent treeNode, all children treeNodes of its will be checked; And vice versa, when specifies a key of treeNode which is a child treeNode, its parent treeNode will also be checked. When `checkable` and `checkStrictly` is true, it'a object has `checked` and `halfChecked` property, and no matter child treeNode or parent treeNode is checked, they won't impact on eachother. | String[]/{checked:Array<String>,halfChecked:Array<String>} | [] |
+|checkStrictly| Check treeNode precisely, parent treeNode and children treeNodes are not associated | bool | false |
+|defaultSelectedKeys | Specifies keys of default selected treeNodes | String[] | [] |
+|selectedKeys |(controlled) Specifies keys of selected treeNode | String[] | - |
+|onExpand | Defines a function will be called when expand or collapse a treeNode | function(expandedKeys, {expanded: bool, node}) | - |
+|onCheck | Defines a function will be called when the onCheck event occurs | function(checkedKeys, e:{checked: bool, checkedNodes, node, event}) | - |
+|onSelect | The callback will be invoked when the user clicks a treeNode | function(selectedKeys, e:{selected: bool, selectedNodes, node, event}) | - |
+|filterTreeNode | Defines a function to filter treeNodes（highlight），when return true, corresponding treeNode will be highlight | function(node) | - |
+|loadData | load data asynchronously | function(node)| - |
+|onRightClick | The call back will be invoked when the user right clicks a treeNoe | function({event,node}) | - |
+|draggable | Specifies whether this Tree is draggable（IE>8） | bool | false |
+|onDragStart | Defines a function will be called when the onDragStart event occurs | function({event,node}) | - |
+|onDragEnter | Defines a function will be called when the onDragEnter event occurs | function({event,node,expandedKeys}) | - |
+|onDragOver  | Defines a function will be called when the onDragOver event occurs | function({event,node}) | - |
+|onDragLeave | Defines a function will be called when the onDragLeave event occurs | function({event,node}) | - |
+|onDrop | Defines a function will be called when the onDrop event occurs | function({event, node, dragNode, dragNodesKeys}) | - |
+
+### TreeNode props
+
+| Property  | Description                              | Type    | Default |
+|-----------|------------------------------------------|---------|---------|
+|disabled | whether disabled the treeNode | bool | false |
+|disableCheckbox | whether disable the checkbox of treeNode | bool | false |
+|title | title | String/element | '---' |
+|key | it's used with (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys. P.S.: it must be unique in all of treeNodes of the tree! | String | internal calculated position of treeNode |
+|isLeaf | whether it's leaf node | bool | false |