对 antd 树使用 react-beautiful-dnd

问题描述

我正在使用 antd 树组件。但我想实现树节点的拖放。我正在使用 react-beautiful-dnd。

我使用自定义 <TreeNode /> 作为树的子项。这是我渲染树的组件。

function ActivityList(props) {
  const { activitiesData,dispatch,changes } = props;

  const renderTreeNodes = (treeData,parentKey) => (
    <Droppable
      key={parentKey}
      droppableId={parentKey}
      type={parentKey}
    >
      {(provided) => (
        <div ref={provided.innerRef}>
          {treeData.map(item => {
            if (item.children) {
              return (
                <Draggable
                  key={item.code}
                  draggableId={item.code}
                >
                  {(providedDrag,snapshot) => (
                    <>
                      <div
                        ref={providedDrag.innerRef}
                        isdragging={snapshot.isdragging}
                        {...providedDrag.draggableProps}
                        {...providedDrag.dragHandleProps}
                      >
                        <TreeNode icon={item.icon}
                                  title={item.title}
                                  key={item.key}
                                  dataRef={item}>
                          {renderTreeNodes(item.children,item.key)}
                        </TreeNode>
                      </div>
                    </>
                  )}
                </Draggable>
              )
            }
            return (
              <Draggable
                key={item.code}
                draggableId={item.code}
              >
                {(providedDrag,snapshot) => (
                  <>
                    <div
                      ref={providedDrag.innerRef}
                      isdragging={snapshot.isdragging}
                      {...providedDrag.draggableProps}
                      {...providedDrag.dragHandleProps}
                    >
                      <TreeNode icon={item.icon} key={item.key} {...item} />
                    </div>
                  </>
                )}
              </Draggable>
            )
          })}
        </div>
      )}
    </Droppable>
  )

  return (
    <SideBarWrapper changes={changes}>
      <DragDropContext
        onDragEnd={(result) => onDragEnd(result)}
      >
        <SortableTree
          showIcon
          defaultSelectedKeys={[activitiesData.treeData[0].key]}
          onSelect={(event) => handleActiveActivity(event)}
          treeData={activitiesData.treeData}
        >
          {renderTreeNodes(activitiesData.treeData,activitiesData.treeData[0].key)}
        </SortableTree>
      </DragDropContext>
    </SideBarWrapper>
  );
};

但是这里我们不允许在 antd 树中渲染除 <TreeNode /> 之外的任何子节点。有什么建议可以克服这个问题吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）