alibaba / alibaba/lowcode-engine

为什么在画布里每次点击 Tabs 组件都会触发 leaf.onPropChange 事件(导致重渲染)?

Open
#1,134 2 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

## **Describe the bug (required)** / **详细描述 bug(必填)**

Antd Tabs 组件的 [meta 文件](https://github.com/alibaba/lowcode-materials/blob/main/packages/antd-lowcode-materials/lowcode/tabs/meta.ts) 没有比较特殊的描述,但每次在画布中点击 Tabs 组件,leaf.onPropChange 事件
都会触发,组件的 props 会重新解析,this.setState 的调用导致 Tabs 组件重渲染

关联 issue:
https://github.com/alibaba/lowcode-engine/issues/1121
https://github.com/alibaba/lowcode-engine/issues/1118

初步定位是重新解析的 props 跟首次解析的 props 不一致,导致了 1121、1118 点击组件 slot 没了的问题

## **To Reproduce (required)** / **如何复现 bug?(必填,非常重要)**

* git clone lowcode-materials 仓库
* git clone lowcode-engine 仓库
* cd lowcode-materials && cd packages/antd-lowcode-materials && npm run lowcode:dev
* 给 lowcode-engine [这行代码](https://github.com/alibaba/lowcode-engine/blob/main/packages/renderer-core/src/hoc/leaf.tsx#L395) 写入 debugger
* 配置 xswitch
* 拖入 Tabs 组件\ Button 组件
* 点击画布里的 Page 组件
* 点击画布里的 Tabs 组件(触发 debug)
* 点击画布里的 Button 组件
* 点击画布里的 Tabs 组件(触发 debug)
* .....

发现每次点击 Tabs 组件都会触发 leaf.onPropChang 事件

xswitch 配置如下
```
{
"proxy": [
[
"https://alifd.alicdn.com/npm/@alilc/lowcode-engine@1.0.14/dist/js/engine-core.js",
"http://localhost:5555/js/engine-core.js"
],
[
"https://alifd.alicdn.com/npm/@alilc/lowcode-engine@1.0.14/dist/css/engine-core.css",
"http://localhost:5555/css/engine-core.css"
],
[
"https://alifd.alicdn.com/npm/@alilc/lowcode-react-simulator-renderer@1.0.14/dist/js/react-simulator-renderer.js",
"http://localhost:5555/js/react-simulator-renderer.js"
]
],
}
···

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with packages/renderer-core/src/hoc/leaf.tsx around line 395 and the Tabs metadata in packages/antd-lowcode-materials/lowcode/tabs/meta.ts. Reproduce the behavior with the lowcode-materials and lowcode-engine development setup, using the listed canvas click sequence and debugger. Done means clicking Tabs no longer triggers the unintended leaf.onPropChange processing or causes the reported prop and slot inconsistencies.

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.