国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Perenderan akhir hanya bergantung pada rupa data Perubahan data adalah di bawah kawalan anda sendiri sama ada ia dibenarkan atau tidak hanyalah soal sama ada data itu berubah.

Sebagai contoh, kod berikut, 子節(jié)點(diǎn) 只能放到 第三個(gè) 下面，不能放到 第一個(gè) di bawah (kerana ini logik saya).

import * as React from 'react';
import {BaseComponent} from '../base';
import Tree from 'antd/lib/tree';
const TreeNode = Tree.TreeNode;
import 'antd/lib/tree/style/index.css';


export interface HeaderProps { }
export interface HeaderState { data: any }

export class Header extends BaseComponent<HeaderProps, HeaderState> {
    state = {
        data: [
            {name: '第一個(gè)', key: 'a'},
            {name: '第二個(gè)', key: 'b',
                children: [
                    {name: '子節(jié)點(diǎn)', key: 'd'}
                ]},
            {name: '第三個(gè)', key: 'c'}
        ]
    };

    constructor(props:HeaderProps) {
        super(props);
    }

    onDragEnter(opt){
        console.log(opt, 'x');
    }

    onDrop(opt){
        const fromNode = opt.dragNode.props.eventKey;
        const toNode = opt.node.props.eventKey;
        if(toNode !== 'c'){ return }
        this.state.data[2]['children'] = this.state.data[1]['children'];
        this.state.data[1]['children'] = [];
        this.setState({});
    }

    loop(data){
        return data.map( d => {
            if(d.children && d.children.length){
                return <TreeNode key={d.key} title={d.name}>{this.loop(d.children)}</TreeNode>
            } else {
                return <TreeNode key={d.key} title={d.name}></TreeNode>
            }
        })
    }

    render() {
        return (<p>
            <Tree className="draggable-tree"
                draggable
                onDragEnter={this.onDragEnter.bind(this)}
                onDrop={this.onDrop.bind(this)}>
                {this.loop(this.state.data)}
            </Tree>
        </p>)
    }
}