callstack / callstack/react-native-paper
Card component injects invalid props into React.Fragment children
- 主要语言
- 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.

### 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