react 有两颗树 右边的树可以拖动左边的树

在 React 中实现这种左右两边树结构，并允许右侧的树拖动左侧的树，通常会涉及到一些库如 `react-dnd`（Drag and Drop）和 `react-beautiful-dnd` 来处理拖放交互，以及状态管理库（如 Redux 或者 hooks-based state management）来同步两个树的状态。

以下是基本步骤：

1. **安装依赖**：首先安装必要的库，例如 `react`, `react-beautiful-dnd`, 和 `@types/react-dnd` 等。

2. **创建组件**：创建两个组件，一个是`LeftTree`负责展示左边的树，另一个是`RightDraggableTree`负责展示右边的树并允许拖放。`RightDraggableTree`通常会有`ondragstart`和`ondrop`等事件处理器，它们会在拖放开始和结束时触发。

import { Draggable, Droppable } from 'react-beautiful-dnd';

class RightDraggableTree extends React.Component {
  //...
  onDragStart = (item) => {
    // 记录拖动的节点信息
  };
  onDrop = (source, item, destination) => {
    // 更新左边树的状态，移动拖动的节点
  };

  render() {
    // 使用Draggable和Droppable组件
    // ...
  }
}

// 类似地，创建LeftTree组件

3. **状态同步**：通过props或者store，将`RightDraggableTree`中拖动节点的操作传递给`LeftTree`，使得两个树的状态保持一致。

4. **更新DOM**：每当状态变化时，都要确保重新渲染这两个组件，以便UI反映最新的状态。