The final rendering only depends on what the data looks like. The change of the data is under your own control. Whether it is allowed or not is just a matter of whether the data changes.

For example, the following code,子节点只能放到第三个下面，不能放到第一个below (because this is my logic).

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 { state = { data: [ {name: '第一个', key: 'a'}, {name: '第二个', key: 'b', children: [ {name: '子节点', key: 'd'} ]}, {name: '第三个', 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 {this.loop(d.children)} } else { return  } }) } render() { return (
  {this.loop(this.state.data)}  
) } }