分类：tuo-react-components

tuo-react-components项目是本公司的ui组件库。出于对3D建模和3D交互的特别要求，页面上的很多常规交互组件不太适用。因此本公司自2019年7月30日创建了tuo-react-components项目。tuo-react-components是基于React的组件库，它用来收集我们创建的所有用在3D建模，建模调参，3D交互等操作的组件。

TuoTree2的目的是出于对树形结构更灵活的需求，而从写的一个树形结构。相比于常规的TuoTree组件，它开放更自由的接口给应用程序，从而允许树形结构中的每一个单元都能由除了Tree本身结构以外的事件所控制。

TuoTree2接受的参数如下：

TuoTree2.propTypes = {
  data: PropTypes.object,
  groupComponent: PropTypes.elementType,
  objectComponent: PropTypes.elementType
}

其中，data的结构示例如下：

data = {{
  '1': {name: '111111111', children: ['2', '3', '4', '5', '6']},
  '2': {name: '222222222', parent: '1'},
  '3': {name: '333333333', parent: '1'},
  '4': {name: '444444444', parent: '1'},
  '5': {name: '555555555', parent: '1', children: ['7','8']},
  '6': {name: '666666666', parent: '1'},
  '7': {name: '777777777', parent: '5'},
  '8': {name: '888888888', parent: '5', children: ['9']},
  '9': {name: '999999999', parent: '8'}
}}  

groupComponent和objectComponent是两个React的elementType。在TuoTree2中将会以这两个elementType为材料创建组件。并传递参数给这两个elementType。

groupComponent的实例方法如下：

<GroupComponent object={this.props.object} changeProperty={this.changeProperty}/>

这其中，this.props.object是前面data中的一个value, changeProperty函数是给GroupComponent元素一个改变tree基本元素属性的接口。目前其接受open和color的改变。

objectComponent的实例方法如下：

<ObjectComponent object={this.props.object} changeProperty={this.changeProperty}/>

它的参数GroupComponent相同。

用户使用TuoTree2时，自己负责每个Tree中的元素类型，自己负责data中每个value与元素类型的交互。典型的方式，例如，让ObjectComponent内部监听data中某个相对应value的事件，来控制自己的state。