[Bug] 在自定义单元格布局时使用ReactVTable.Link某些情况下会报错:Cannot read properties of undefined (reading 'renderNextFrame')
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 3.7k
- Forks
- 486
- Avg merge
- 1d 19h
- Merged PRs (30d)
- 16
Description
Version
1.22.7
Link to Minimal Reproduction
无
Steps to Reproduce
表格中每一行数据(至少100行)所有列都是自定义单元格布局,其中有6列使用相同的自定义单元格布局组件(如下):
<ReactVTable.Group
attribute={{
width,
height,
display: "flex",
flexWrap: "nowrap",
flexDirection: "row",
alignItems: "center",
alignContent: "center",
justifyContent: "center",
}}
onMouseEnter={(event) => {
setHover(true);
event.currentTarget.stage.renderNextFrame();
}}
onMouseLeave={(event) => {
setHover(false);
event.currentTarget.stage.renderNextFrame();
}}
>
<ReactVTable.Group
attribute={{
width: width - 16,
height,
display: "flex",
flexWrap: "nowrap",
flexDirection: "row",
alignItems: "flex-start",
alignContent: "flex-start",
justifyContent: "space-between",
}}
>
<ReactVTable.Group
attribute={{
width: width - 30,
height,
display: "flex",
flexWrap: "wrap",
flexDirection: "row",
alignItems: "center",
alignContent: "center",
justifyContent: "flex-start",
clip: true,
}}
>
<ReactVTable.Link
maxWidth={width - 16}
onClick={handleView}
textStyle={{
fontSize: 12,
fill: "rgb(51, 101, 238)",
}}
panelStyle={{
visible: true,
boundsPadding: [6, 12],
}}
>
查看
</ReactVTable.Link>
</ReactVTable.Group>
</ReactVTable.Group>
</ReactVTable.Group>
表格渲染后,控制台批量报错:
Link组件错误位置:
我尝试把 ReactVTable.Link 换成 ReactVTable.Button,也会出同样的错误。
Current Behavior
出错的单元格未正常渲染(前面使用相同单元格组件的列渲染正常):
Expected Behavior
能正常渲染不出错
Environment
- OS: MacOS Tahoe
- Browser: Edge 143.0.3650.80
- Framework: React 18.x
Any additional comments?
暂时用 ReactVTable.Tag 代替 ReactVTable.Link 后正常,只是 Tag 的 TagProps 没继承 IEventParamsType,需要手动屏蔽错误提示:
<ReactVTable.Tag
maxWidth={width - 16}
/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
/* @ts-expect-error */
onClick={handleView}
padding={[4, 6]}
textStyle={{
fontSize: 12,
cursor: "pointer",
fill: "white",
}}
panelStyle={{
visible: true,
boundsPadding: [6, 12],
fill: "#165dff",
}}
>
查看
</ReactVTable.Tag>
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the issue with ReactVTable.Link or Button in a custom cell layout across at least 100 rows and six repeated columns. Inspect the component error location and the renderNextFrame call path, comparing the failing cells with the earlier cells that render correctly. Done means all cells render without the undefined renderNextFrame error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100