amis-eidtor拖拽问题求助

[matyman]

描述问题：

react 开发接入 amis-editer ，实现组件间的自由推拽，目前报错无法拖拽

截图或视频：

见评论

如何复现（请务必完整填写下面内容）：

1. 你是如何使用 amis 的？
   npm

2. amis 版本是什么？请先在最新 beta 版本测试问题是否存在

6.12.0

3. 粘贴有问题的完整 amis schema 代码：

4. 操作步骤

最外层的 page 容器内的 body 内的内容是动态渲染的，custom-panel 是我自定义的一个组件，在渲染时动态的包裹 custom-panel 可以实现渲染展示 custom-panel ，但是源码又不会出现 custom-panel 的效果

目前排查这样操作会导致拖拽问题，未包裹的 formset 就是正常拖拽

能不能帮忙解决问题

[matyman]

[matyman]

export default ({ busType, render, body, toolbar }: IProps) = {
  const toolbarMap = useMemo(() = {
    return toolbar?.reduce((pre, cur) = {
      pre[cur.region] = cur;
      return pre;
    }, {});
  }, [body]);

  const topToolbar = useMemo(() = {
    return toolbar?.filter((d) = d.region === 'top');
  }, [toolbar]);

  const formatContent = (content) = {
    return content?.map((d) = {
      // 表单默认嵌套 panel
      if (d?.type === 'formset') {
        return {
          ...d,
          body: d?.body?.map((form: any) = {
            const { $$id, id, ...panelProps } = form?.extendProps?.panelProps ?? {};
            return {
              type: 'custom-panel',
              title: form?.title,
              ...panelProps,
              body: [
                {
                  ...form,
                  formProps: form.name ? { ...form.formProps, id: `${busType}_${form.name}` } : form.formProps
                }
              ]
            };
          })
        };
      }
      // 表格默认嵌套 panel
      if (d.type === 'table') {
        return {
          type: 'custom-panel',
          showToolbar: true,
          toolbar: toolbarMap[d.id],
          ...d.panel,
          body: d
        };
      }
      // tabs默认嵌套 panel
      if (d.type === 'tabs') {
        return {
          type: 'custom-panel',
          collapsible: false,
          showPrefix: false,
          ...d.panel,
          body: {
            ...d,
            tabs: d.tabs?.map((tab) = ({
              ...tab,
              body: formatContent(tab.body)
            }))
          }
        };
      }
      if (d.type === 'flex') {
        return {
          ...d,
          items: d.items?.map((container) = {
            return {
              ...container,
              body: formatContent(container.body)
            };
          })
        };
      }
      // 文档渲染
      if (d.type === 'document' && d.panel) {
        return {
          type: 'custom-panel',
          showToolbar: true,
          toolbar: toolbarMap[d.id],
          ...d.panel,
          body: d
        };
      }
      return d;
    });
  };

  const renderBody = formatContent(body);

  /**
  * render 外层需要包裹一层容器，否则内容清空后无法显示该区域
  */
  return (
    <Layout.Flex direction="column" style={{ padding: cssVar.gap, paddingBottom: 0 }}
      <div{render('toolbar', topToolbar)}</div
      <Layout.Flex direction="column" style={{ gap: cssVar.gap, overflow: 'hidden', padding: `${cssVar.gap} 0` }}
        {render('body', renderBody)}
      </Layout.Flex
    </Layout.Flex
  );
};