alibaba
多余的children默认值
Describe the bug (required) / 详细描述 bug（必填）
在预览时，容器组件会默认地给children设置一个null
To Reproduce (required) / 如何复现 bug？（必填，非常重要）
Steps to reproduce the behavior: / 详细复现步骤：
用antd场景，拖入一个卡片，点击预览
生成Schema如下，并没有children属性
而预览时,多了children:null
期望不要有
引擎无法约束业务方的组件库怎么处理children，保不准会出现写法
{has(props, 'children') ? children : renderCardContent()}
今天又遇到了一个case.
一个插槽组件（接收props.children的组件)，组件内部的逻辑是,当children没传时给一个默认组件。
现在由于这个默认传children问题，组件默认变成了
因为children为null
第三个Case, 跟children有关
<Tabs size="large" keyboard={false}>
<Tabs.TabPane tab="福州市" key="tab-item-0" forceRender={false} />
<Tabs.TabPane tab="厦门市" key="tab-item-1" />
<Tabs.TabPane tab="深圳市" key="tab-item-2" />
</Tabs>
<Card>
// 根据选中tab展示不同内容
</Card>
希望只使用tab切换功能, 不使用TabPane做容器。 但是在画布中却强制显示出TabPane的插槽
Case4. 当年龄列设置为自定义渲染时, 如果数据是0,则不会渲染出来
复现: https://lowcode-engine.cn/demo/demo-basic-antd/index.html
{
"componentName": "Page",
"id": "node_ocl84j72qb1",
"props": {
"ref": "outerView",
"style": {
"height": "100%"
}
},
"fileName": "/",
"dataSource": {
"list": [
{
"type": "fetch",
"isInit": true,
"options": {
"params": {},
"method": "GET",
"isCors": true,
"timeout": 5000,
"headers": {},
"uri": "mock/info.json"
},
"id": "info",
"shouldFetch": {
"type": "JSFunction",
"value": "function() { \n console.log('should fetch.....');\n return true; \n}"
}
}
]
},
"state": {
"text": {
"type": "JSExpression",
"value": "\"outer\""
},
"isShowDialog": {
"type": "JSExpression",
"value": "false"
}
},
"css": "body {\n font-size: 12px;\n}\n\n.button {\n width: 100px;\n color: #ff00ff\n}",
"lifeCycles": {
"componentDidMount": {
"type": "JSFunction",
"value": "function componentDidMount() {\n console.log('did mount');\n}"
},
"componentWillUnmount": {
"type": "JSFunction",
"value": "function componentWillUnmount() {\n console.log('will unmount');\n}"
}
},
"methods": {
"testFunc": {
"type": "JSFunction",
"value": "function testFunc() {\n console.log('test func');\n}"
},
"onClick": {
"type": "JSFunction",
"value": "function onClick() {\n this.setState({\n isShowDialog: true\n });\n}"
},
"closeDialog": {
"type": "JSFunction",
"value": "function closeDialog() {\n this.setState({\n isShowDialog: false\n });\n}"
}
},
"originCode": "class LowcodeComponent extends Component {\n state = {\n \"text\": \"outer\",\n \"isShowDialog\": false\n }\n componentDidMount() {\n console.log('did mount');\n }\n componentWillUnmount() {\n console.log('will unmount');\n }\n testFunc() {\n console.log('test func');\n }\n onClick() {\n this.setState({\n isShowDialog: true\n })\n }\n closeDialog() {\n this.setState({\n isShowDialog: false\n })\n }\n}",
"hidden": false,
"title": "",
"isLocked": false,
"condition": true,
"conditionGroup": "",
"children": [
{
"componentName": "Table",
"id": "node_oclcr6wbtv1",
"props": {
"dataSource": [
{
"id": "1",
"name": "胡彦斌",
"age": 32,
"address": "西湖区湖底公园1号"
},
{
"id": "2",
"name": "王一博",
"age": 0,
"address": "滨江区网商路699号"
}
],
"columns": [
{
"title": "姓名",
"dataIndex": "name",
"key": "name"
},
{
"title": "年龄",
"dataIndex": "age",
"key": "age",
"align": "left",
"fixed": "",
"render": {
"type": "JSSlot",
"params": [
"text",
"record",
"index"
],
"value": [
{
"componentName": "Typography.Text",
"id": "node_oclcr6wbtv3",
"props": {
"children": {
"type": "JSExpression",
"value": "this.text",
"mock": "text"
},
"code": false,
"delete": false,
"disabled": false,
"mark": false,
"keyboard": false,
"underline": false,
"strong": false
},
"hidden": false,
"title": "",
"isLocked": false,
"condition": true,
"conditionGroup": ""
}
]
}
}
],
"rowKey": "id",
"pagination": {
"pageSize": 10,
"total": 15,
"current": 1,
"showSizeChanger": false,
"showQuickJumper": false,
"simple": false,
"size": "default"
},
"loading": false,
"showHeader": true,
"size": "default",
"tableLayout": "",
"scroll": {
"scrollToFirstRowOnChange": true
}
},
"hidden": false,
"title": "",
"isLocked": false,
"condition": true,
"conditionGroup": ""
}
]
}
目前的设计问题是
不存在(这个字段不存在,没有配置),undefined,null,"",0 都转成 null
作为使用者, 上述4个都是不同意义, 但进入低代码则被强制收束成一个
另外, 在simulator层,将null视为此处需要插槽的前提, 但从js语义来说, undefined更合适
关于多余的 children 默认值问题。
可以通过 customCreateElement 配置自行解决。
其他问题可以提新的 issue。
这个应该能解决预览时的问题, 但在设计器画布中呢? 没找到可以配customCreateELement的地方.