UNPKG

zent

Version:

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

89 lines (81 loc) 2.09 kB
import React, { Component } from 'react'; import ajax from 'superagent'; import jsonp from 'superagent-jsonp'; import Tree from '../src/index'; import '../assets/index.scss'; /* 异步加载数据,通过loadMore属性配置点击节点的回调方法,需要返回promise对象 */ const ajaxJsonpGet = (url, callback) => { ajax .get(url) .use(jsonp) .end((err, res) => { if (err || res.body.code !== 0) { // deal with error } else { callback(res.body); } }); }; const getProvince = callback => { ajaxJsonpGet('https://koudaitong.com/v2/common/region/provinceList.jsonp', callback); }; export default class Example extends Component { constructor() { super(); this.state = { treeData: [] }; this.loadMore = this.loadMore.bind(this); } componentDidMount() { getProvince(res => { if (res) { let newData = [{ id: 'China', title: '中国🇨🇳', expand: true }]; newData = newData.concat(Object.keys(res.data).map(key => ({ id: key, title: res.data[key], parentId: 'China' }))); this.setState({ treeData: newData }); } }); } loadMore(data) { return new Promise((resolve, reject) => { ajax .get(`https://koudaitong.com/v2/common/region/list.jsonp?region_id=${data.id}`) .use(jsonp) .end((err, res) => { if (err || res.body.code !== 0) { reject(); } else { const treeData = this.state.treeData.concat(Object.keys(res.body.data).map(key => ({ id: key, title: res.body.data[key], parentId: data.id }))); this.setState({ treeData }); resolve(); } }); }); } render() { const props = { commonStyle: { color: 'orange' }, loadMore: this.loadMore, dataType: 'plain', data: this.state.treeData, size: 'medium' }; return <Tree {...props} />; } }