zent/tree/examples/BaseTree.js

一套前端设计语言和基于React的实现

import React, { Component } from 'react';
import Tree from '../src/index';
import '../assets/index.scss';

/*
一颗最基本的树，点击expandAll控制树的展开收起
*/

const treeData = [{
  id: 1,
  title: '杭州有赞',
  children: [{
    id: 2,
    title: 'XXXXXX',
    expand: false,
    children: [{
      id: 5,
      title: '内部平台'
    }, {
      id: 6,
      title: '运维'
    }, {
      id: 7,
      title: '前端'
    }]
  }, {
    id: 3,
    title: '市场'
  }, {
    id: 4,
    title: '技术',
    children: [{
      id: 8,
      title: '内部平台'
    }, {
      id: 9,
      title: '运维'
    }, {
      id: 10,
      title: '前端'
    }]
  }]
}];

export default class Example extends Component {
  constructor() {
    super();
    this.state = {
      expandAll: false
    };
    this.handleExpandAll = this.handleExpandAll.bind(this);
  }

  handleExpandAll() {
    this.setState({ expandAll: !this.state.expandAll });
  }

  render() {
    return (
      <div>
        <button onClick={this.handleExpandAll}>Toggle Expand All</button>
        <Tree data={treeData} expandAll={this.state.expandAll} />
      </div>
    );
  }
}