callstack / callstack/react-native-paper

Card component injects invalid props into React.Fragment children

未关闭
#4,710 1 条评论 4 个 reaction 已指派 0 人 在 GitHub 查看
bug Card
主要语言
TypeScript
星标
14.5k
派生
2.2k
平均合并
5 天 23 小时
30 天内合并 PR
12

描述

### Current behaviour

The Card component clones its children and injects additional props (index, total, siblings, borderRadiusStyles). This leads to runtime errors when a child is a React.Fragment, which only accepts key and children props. Other components that do not expect these props may also be affected.

![Image](https://github.com/user-attachments/assets/d8f0a199-4e2e-4649-9cb1-62e20472142e)

### Expected behaviour
The Card component should render React.Fragment children without throwing runtime errors by avoiding invalid prop injection.

### How to reproduce?
Pass a React.Fragment as a child of Card.

### What have you tried so far?

Relevant source line: https://github.com/callstack/react-native-paper/blob/main/src/components/Card/Card.tsx#L278

Potential fix:

```tsx
import { Fragment } from 'react';

// ...

const content = (

{React.Children.map(children, (child, index) => {
if (!React.isValidElement(child)) {
return child;
}
if (child.type === Fragment) {
return child;
}

return React.cloneElement(child as React.ReactElement, {
index,
total,
siblings,
borderRadiusStyles,
});
})}

);
```

贡献指南

打开贡献指南

调研方向

从 src/components/Card/Card.tsx 第 278 行附近的子元素处理代码开始,通过将 React.Fragment 传递给 Card 来重现该问题。检查克隆后的子元素如何接收 props,并验证 Fragment 的子元素在没有运行时错误或注入无效 props 的情况下完成渲染。

由索引模型根据 Issue 内容生成。

评估

技术栈
react-native, typescript
领域
mobile
Issue 类型
缺陷
难度
2/5
预计耗时
1-3 小时
活跃度
停滞
描述清晰度
描述清楚
新手友好度
45/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。