写代码要思路清晰，一步一步来，首先从最简单的来，慢慢加入新东西，逐渐优化。本文只是简单渲染出一颗树，通过传树形结构数组。
vue通过组件递归将数据渲染出一颗树，react则通过函数递归，
数据结构：
treeData:[
{label:‘1‘,key:‘1‘,children:[{label:‘1-1‘,key:‘11‘},{label:‘1-2‘,key:‘12‘}]},
{label:‘2‘,key:‘2‘,children:[{label:‘2-1‘,key:‘21‘}]}
]
渲染结果：
代码也简单
Vue（至少要两个组件才能看到效果）
tree组件（被调用）：
<template>
<div >
<div>{{label}}</div>
<vue-tree v-for="node in children" :label="node.label" :children="node.children"></vue-tree>
</div>
</template>
<script>
export default {
name:‘vue-tree‘,
props:[‘label‘,‘children‘]
}
</script>
home（调用tree）
<template>
<div>
<vue-tree :label="treeData.label" :children="treeData"></vue-tree>
</div>
</template>
<script>
import VueTree from ‘./VueTree‘;
export default {
name: ‘Home‘,
data () {
return {
treeData:[
{label:‘1‘,key:‘1‘,children:[{label:‘1-1‘,key:‘11‘},{label:‘1-2‘,key:‘12‘}]},
{label:‘2‘,key:‘2‘,children:[{label:‘2-1‘,key:‘21‘}]}]
}
},
components:{VueTree}
}
</script>
react（核心）：
import React, { Component } from ‘react‘;
import logo from ‘./logo.svg‘;
import ‘./App.css‘;
const treeData=[
{label:‘1‘,key:‘1‘,children:[{label:‘1-1‘,key:‘11‘},{label:‘1-2‘,key:‘12‘}]},
{label:‘2‘,key:‘2‘,children:[{label:‘2-1‘,key:‘21‘}]}]
class App extends Component {
constructor(props) {
super(props);
this.state = { };
this.buildTree=this.buildTree.bind(this);
}
buildTree(data){
return data.map(item=>{
if(item.children){
return <div key={item.key}>{item.key}{this.buildTree(item.children)}</div>
}
return <div key={item.key}>{item.label}</div>
})
}
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
{this.buildTree(treeData)}
</div>
);
}
}
export default App;
下载地址：https://gitee.com/zhiming_2017/Components.git
原文：https://www.cnblogs.com/xingguozhiming/p/9610613.html