描述问题:
InputTable 无法渲染自定义组件
截图或视频:
如何复现(请务必完整填写下面内容):
- 你是如何使用 amis 的?
在React中使用 - amis 版本是什么?请先在最新 beta 版本测试问题是否存在
amis: ^2.1.0 - 粘贴有问题的完整
amis schema
代码:
自定义组件
import { Func } from '@/interface/func';
import FuncGraph from '@/pages/Processor/function/Edit/FuncGraph';
import { FormControlProps, FormItem, Schema } from 'amis';
import { Drawer, Select } from 'antd';
import { useEffect, useState } from 'react';
export const FUNC_COMPONENT_TYPE = 'func-edit' as const;
interface Props extends FormControlProps {
returnType?: Func.EDataType;
}
const FuncEdit = (props: Props) => {
const { value, onChange, returnType, data, env } = props;
env.enableAMISDebug = true;
const [drawerVisible, setDrawerVisible] = useState(false);
const [baseType, setBaseType] = useState<Func.EType>();
// console.log(data);
const handleFinish = (json: string) => {
onChange(json);
};
useEffect(() => {
setDrawerVisible(baseType === Func.EType.function);
}, [baseType]);
return (
<>
<Select
value={baseType}
onChange={setBaseType}
style={{ width: 150 }}
options={[
{
label: '字面量',
value: Func.EType.literal,
},
{
label: '字段',
value: Func.EType.field,
},
{
label: '函数',
value: Func.EType.function,
},
]}
/>
<Drawer
title="函数编辑"
closable
width={'100vw'}
height={'100vh'}
onClose={() => {
setDrawerVisible(false);
}}
bodyStyle={{ padding: 0 }}
visible={drawerVisible}
placement={'top'}
>
<div style={{ position: 'relative', width: '100%', height: '100%' }}>
<FuncGraph onFinish={handleFinish} initJSON={value} returnType={returnType} />
</div>
</Drawer>
</>
);
};
// https://aisuda.bce.baidu.com/amis/zh-CN/docs/extend/custom-react#%E8%A1%A8%E5%8D%95%E9%A1%B9%E7%9A%84%E6%89%A9%E5%B1%95
export default FormItem({ type: FUNC_COMPONENT_TYPE, autoVar: true })(FuncEdit);
export interface FuncEditSchema extends Schema {
type: typeof FUNC_COMPONENT_TYPE;
returnType: Func.EDataType;
}
Schema
{
"type": "input-table",
"name": "fields",
"size": "full",
"required": true,
"readonly": false,
"label": "输出字段集",
"needConfirm": false,
"addable": true,
"editable": true,
"removable": true,
"columnsTogglable": false,
"columns": [
{
"type": "func-edit",
"label": "函数",
"name": "function",
"size": "md",
"required": true,
"returnType": "integer"
},
{
"name": "field_name",
"label": "字段名",
"type": "input-text"
},
{
"type": "select",
"label": "字段类型",
"name": "field_type",
"size": "md",
"required": true,
"readOnly": false,
"options": [
{
"label": "string",
"value": "string"
},
{
"label": "int",
"value": "int"
},
{
"label": "long",
"value": "long"
},
{
"label": "float",
"value": "float"
},
{
"label": "double",
"value": "double"
},
{
"label": "boolean",
"value": "boolean"
},
{
"label": "binary",
"value": "binary"
}
]
}
]
},
不再input-table中渲染是正常的
{
"type": "func-edit",
"label": "函数",
"name": "function",
"size": "md",
"required": true,
"returnType": "integer"
},
- 操作步骤
6条答案
按热度按时间lsmepo6l1#
👍 Thanks for this!
🏷 I have applied any labels matching special text in your issue.
Please review the labels and make any necessary changes.
lsmd5eda2#
👍 Thanks for this!
🏷 I have applied any labels matching special text in your issue.
Please review the labels and make any necessary changes.
ftf50wuq3#
同遇到这个问题了,有计划什么时候修复吗
dfuffjeb4#
同遇到这个问题了,有计划什么时候修复吗
我的解决方案是:用AMIS的自定义组件自己封装一个InputTable,我使用ant design实现的,你可以试试
2ul0zpep5#
同遇到这个问题了,有计划什么时候修复吗
我的解决方案是:用AMIS的自定义组件自己封装一个InputTable,我使用ant design实现的,你可以试试
好的,看看官方最近会不会修复先把,如果未修复后边可以考虑,工程量不小
2ul0zpep6#
+1