amis-editer 拖拽问题求 #21251
Description
实现场景：
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>
);
};