在自定义容器中使用form 报错

[minzhenyu]

json:
scaffold = { type: 'vue-info-card-container', label: 'vue-info-card-container', name: 'vue-info-card-container', body: [ // 容器类字段 { "type": "container", "body": [ { "type": "form", "api": "/amis/api/mock2/form/saveForm", "body": [ { "type": "input-text", "name": "name", "label": "姓名：" }, { "name": "email", "type": "input-email", "label": "邮箱：" } ] }, { "type": "tpl", "tpl": "自定义容器区", "inline": false },{ "type": "son", "label": 'npm-custom-son', "name": 'npm-custom-son', } ] } ] };

[minzhenyu]

@wibetter 能麻烦看下吗,我这是用的demo,并且form那段也是从组件api那边copy来的,看了amis下源代码,这个context是不是在vue中不存在导致的,或者是需要对vue组件做处理

[wibetter]

方便的话，截图看下你们的demo代码是怎么写的，

[minzhenyu]

son-plugin.jsx:
`/**

• @file 编辑器扩展, 增加自定义组件
  */
  // @ts-ignore
  import { registerAmisEditorPlugin } from 'amis-widget';

export class SonPlugin {
rendererName = 'son';
$schema = '/schemas/UnkownSchema.json';
name = 'son';
description = '子组件';
tags = ['容器', '自定义'];
icon = 'fa fa-file-code-o';
scaffold = {
type: 'son',
label: 'son',
name: 'son'
};

previewSchema = {
type: 'son',
label: 'son',
body: '内容'
};

panelTitle = '配置';

panelControls = [
{
type: 'textarea',
name: 'title',
label: '卡片title',
value:
'amis 是一个低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率。',
},
{
type: 'text',
name: 'backgroundImage',
label: '展示图片',
value:
'https://search-operate.cdn.bcebos.com/64c279f23794a831f9a8e7a4e0b722dd.jpg',
},
{
type: 'input-number',
name: 'img_count',
label: '图片数量',
value: 3,
},
{
type: 'input-number',
name: 'comment_count',
label: '评论数',
value: 2021,
},
];
}

registerAmisEditorPlugin(SonPlugin, {
rendererName: 'son',
name: 'son',
// description: '信息展示卡片',
// tags: ['展示', '自定义'],
order: 99,
// icon: 'fa fa-file-code-o',
// panelTitle: '配置'
});

export default SonPlugin;`

[minzhenyu]

@wibetter 之前只是注册自定义子组件是成功了,只是在这个基础上使用form 就失败了

[minzhenyu]

我用的yarn安装的,会是版本的原因吗,自动安装了1.8.0的版本,我记得之前是beta版本

amis-widget@^1.3.3:
version "1.3.5"

amis@^1.8.0, amis@^1.8.0-beta.2:
version "1.8.0"

amis-editor@^4.1.0-beta.2:
version "4.1.0-beta.4"

[minzhenyu]

我又试了下https://aisuda.bce.baidu.com/amis/zh-CN/components/form/index
里面的默认模式,报同样的错误,甚至使用page组件都同样的报错,是vue自定义组件不兼容的原因吗
{ "type": "page", "body": { "type": "form", "api": "/amis/api/mock2/form/saveForm", "body": [ { "type": "input-text", "name": "name", "label": "姓名：" }, { "name": "email", "type": "input-email", "label": "邮箱：" } ] } }

[minzhenyu]

@wibetter 看了下amis-widget 下createVue2Component 里constructor 没传context 这个参数,
还是amis里面WithStore.tsx中 addStore需要使用下图标出来的用法

[wibetter]

看截图使用上没有问题，刚测试了一下，确实是我们这边的问题，我先定位下问题哈

[minzhenyu]

好的,谢谢,辛苦了

[minzhenyu]

@wibetter 本地项目做了一个下拉vue组件放进vue容器中也存在相同报错,这次是wrapControl.tsx中rootStore.addStore 这个方法,
所以个人觉得是对vue组件封装成react组件的方法存在一定问题
amis-widget 中vueFactory.tsx 应该是要做兼容处理

[wibetter]

不一定是amis-widget 中vueFactory.tsx 兼容处理问题，因为涉及到跨技术栈可能还需要amis-editor做对应的调整。等忙完这两天抽空针对性的看下哈，

[wibetter]

目前看跨技术栈支持vue容器还有需要进一步完善的地方，可以试下react容器类自定义组件，

[minzhenyu]

好的,感谢,官方对amis-editor有开源计划吗?黑盒实在是麻烦,没法精准定位问题
我这边也准备换方案了,代价太大,时间上等不及

[wibetter]

不好意思哈，短期内amis-editor没有开源计划，在低代码方面如果有需求也可以使用我们的爱速搭哈，支持私有化部署，定制化服务。

[wibetter]

@minzhenyu amis-editor 从 4.1.0-beta.19 开始已经开源部分源码了：

[minzhenyu]

好的,感谢

[wibetter]

主要是为了方便查看amis-editor中预置组件的可视化配置是如何实现的，这样扩展自定义组件的时候也知道如何设置自定义组件的配置项。

[minzhenyu]

恩,至少有参考信息了