alibaba / alibaba/lowcode-engine

Tab物料的slot组件总是重新加载当修改prop时。

Open
#3,103 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
15.9k
Forks
2.7k
PR merge metrics
No merged PRs in 30d

Description

每次修改tab prop时(这个属性有个setValue会更新children的值),tab children slot里的组件总是remount。当slot组件大时就会导致设计页面卡顿。希望有一种方法能让slot不重复加载。
下面是tab的schema配置。

```json
{
"componentName": "ColorfulTab",
"title": "选项卡",
"category": "布局容器类",
"group": "高级组件",
"configure": {
"props": [
{
"name": "tabs",
"title": "标签项",
"setter": {
"componentName": "EventEditSetterRefactor",
"props": {
"placeholder": "请输入标签名"
}
},
"extraProps": {
"display": "accordion",
"getValue": {
"type": "JSFunction",
"value": "function getValue(target) {\n const map = target.node.children.map((child) => {\n const key = child.getPropValue('key') ? String(child.getPropValue('key')) : child.id;\n const buttonConfig = child.getPropValue('buttonConfig') ? child.getPropValue('buttonConfig') : { \n funcShow: {}, functional: {}, tooltip: {}, btnStyle: {}, fontStyle: {}, \n }; return {\n key,\n title: child.getPropValue('tab'),\n buttonConfig };\n });\n return map;\n }"
},
"setValue": {
"type": "JSFunction",
"value": "function setValue(target, value) {\n const { node } = target;\n const map = {};\n\n if (!Array.isArray(value)) {\n value = [];\n }\n console.info('value node', value); value.forEach((item) => {\n const tabItem = Object.assign({}, item);\n map[item.key] = tabItem;\n });\n\n node.children.mergeChildren(\n (child) => {\n const children = child.getPropValue('children') || {type: 'JSSlot', params: undefined, value: undefined, title: undefined, name: undefined}; child.setPropValue('children', children); const key = String(child.getPropValue('key') || child.id);\n if (Object.hasOwnProperty.call(map, key)) {\n child.setPropValue('tab', map[key].tab || map[key].title);child.setPropValue('title', map[key].tab || map[key].title);\n console.info('node key', key); delete map[key];\n return false;\n }\n return true;\n },\n (children) => {\n const items = [];\nconsole.info('child 1', children, map); for (const key in map) {\n if (Object.hasOwnProperty.call(map, key)) {\n items.push({\n componentName: 'ColorfulTabPane',\n props: map[key],\n });\n }\n }\n return items;\n },\n (child1, child2) => {\n const a = value.findIndex(\n (item) => String(item.key) === String(child1.getPropValue('key') || child1.id),\n );\n const b = value.findIndex(\n (item) => String(item.key) === String(child2.getPropValue('key') || child2.id),\n );\n console.info('node sorter'); return a - b;\n },\n );\n }"
}
}
},

"component": {
"isContainer": true,
"nestingRule": {
"childWhitelist": [
"ColorfulTabPane"
]
}
},
"advanced": {
"initialChildren": [
{
"componentName": "ColorfulTabPane",
"props": {
"key": "node_01",
"tab": "Item 1",
"title": "Item 1",
"children": {
"type": "JSSlot",
"value": []
}
}
},
{
"componentName": "ColorfulTabPane",
"props": {
"key": "node_02",
"tab": "Item 2",
"title": "Item 2",
"children": {
"type": "JSSlot",
"value": []
}
}
},
{
"componentName": "ColorfulTabPane",
"props": {
"key": "node_03",
"tab": "Item 3",
"title": "Item 2",
"children": {
"type": "JSSlot",
"value": []
}
}
}
]
},
"supports": {
"style": true
}
},

},
`

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the tabs prop's setValue function and its node.children.mergeChildren call in the schema shown in the report. Reproduce a tab prop change with a large slot component and trace why the slot remounts; done means changing the tab prop no longer reloads existing slot content.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.