amis-editor 使用问题求助

[matyman]

实现场景：

react 开发接入 amis-editer ，实现组件间的自由推拽

存在的问题：

现在遇到了拖拽的问题，报错如图

当前方案：

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

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

能不能帮忙解决问题

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>
  );
};

[github-actions]

该 issue 被自动判定为可能的垃圾（标题/正文中存在大量特殊括号 (226)，包含电话号码模式且带有异常符号格式）。已自动关闭。如误判请联系维护者。

[github-actions]

👍 Thanks for this!
🏷 I have applied any labels matching special text in your issue.

Please review the labels and make any necessary changes.