Skip to content

fix(tabs): 兼容16的处理 #3150

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
oasis-cloud merged 11 commits into from
Apr 3, 2025
Merged

fix(tabs): 兼容16的处理 #3150

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
455ac0b
fix: popover 无法消失
xiaoyatong Mar 27, 2025
1d753f8
Merge branch 'feat_v3.x' of github.com:jdf2e/nutui-react into feat_v3.x
xiaoyatong Mar 27, 2025
6944c3a
Merge branch 'feat_v3.x' of github.com:jdf2e/nutui-react into feat_v3.x
xiaoyatong Mar 28, 2025
f582ce6
Merge branch 'feat_v3.x' of github.com:jdf2e/nutui-react into feat_v3.x
xiaoyatong Mar 28, 2025
8c80de5
Merge branch 'feat_v3.x' of github.com:jdf2e/nutui-react into feat_v3.x
xiaoyatong Apr 2, 2025
670f567
Merge branch 'feat_v3.x' of github.com:jdf2e/nutui-react into feat_v3.x
xiaoyatong Apr 2, 2025
a5eded7
Merge branch 'feat_v3.x' of github.com:jdf2e/nutui-react into feat_v3.x
xiaoyatong Apr 2, 2025
17d9c3e
fix: merge
xiaoyatong Apr 2, 2025
98d9852
Merge branch 'feat_v3.x' of github.com:jdf2e/nutui-react into feat_v3.x
xiaoyatong Apr 3, 2025
265378d
fix(tabs): 兼容react 16
xiaoyatong Apr 3, 2025
667d53a
test: fixed
xiaoyatong Apr 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/packages/tabpane/tabpane.taro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,5 +31,7 @@ export const TabPane: FunctionComponent<
className
)

return children && <View className={classes}>{!disabled && children}</View>
return children ? (
<View className={classes}>{!disabled && children}</View>
) : null
}
4 changes: 3 additions & 1 deletion src/packages/tabpane/tabpane.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,5 +30,7 @@ export const TabPane: FunctionComponent<
className
)

return children && <div className={classes}>{!disabled && children}</div>
return children ? (
<div className={classes}>{!disabled && children}</div>
) : null
Comment on lines +33 to +35

@coderabbitai coderabbitai Bot Apr 3, 2025

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

❓ Verification inconclusive

代码修改提高了逻辑清晰度，并解决了 React 16 兼容性问题

将逻辑与（&&）运算符替换为三元运算符是一个很好的改进。这种修改明确了当 children 不存在时返回 null，而不是可能导致的隐式 undefined。这解决了在 React 16 中可能出现的渲染问题，使组件行为更加可预测。

不过，根据静态分析工具的提示，第 35 行（返回 null 的情况）没有被测试覆盖。建议添加相应的测试用例，确保这种边缘情况得到正确处理。

🏁 Script executed:

#!/bin/bash
# 检查是否有相关的测试用例验证 children 为空的情况
rg -n "test.*(?:without|empty|no|null).*children" --type ts src/packages/tabpane/__tests__/

Length of output: 165

重点：请添加针对 children 为空情况的测试用例

代码修改提升了逻辑清晰度，并解决了 React 16 兼容性问题。将逻辑与（&&）运算符替换为三元运算符，使组件在 children 为空时明确返回 null，避免了可能的隐式 undefined 问题。

不过，目前在项目中没有找到可验证 children 为空（返回 null）的测试用例，可能会导致这一边缘情况在未来未被覆盖。建议补充相应的测试用例，以确保此情况得到正确处理。

  • 文件位置：src/packages/tabpane/tabpane.tsx（第 33-35 行）
  • 建议为 children 为空的情况增加测试覆盖
🧰 Tools
🪛 GitHub Check: codecov/patch

[warning] 35-35: src/packages/tabpane/tabpane.tsx#L35
Added line #L35 was not covered by tests

}
11 changes: 10 additions & 1 deletion src/packages/tabs/__test__/tabs.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ test('base other props', async () => {
})

test('base Tabpane Props', () => {
const { container } = render(
const { container, rerender } = render(
<Tabs value="0">
<TabPane title="Tab 1" value="0">
Tab 1
Expand All @@ -88,6 +88,15 @@ test('base Tabpane Props', () => {
expect(el[0]).toHaveClass('nut-tabs-titles-item-active')
expect(el[1]).toHaveClass('nut-tabs-titles-item-disabled')
expect(el2[0]).toHaveTextContent('Tab 1')

rerender(
<Tabs value="0">
<TabPane title="Tab 1" value="0" />
<TabPane title="Tab 2" value="1" disabled />
<TabPane title="Tab 3" value="2" />
</Tabs>
)
expect(container.querySelectorAll('.nut-tabpane').length).toBe(0)
})

test('base Tabpane autoHeight Props', () => {
Expand Down