callstack / callstack/react-native-paper
Card component injects invalid props into React.Fragment children
- Ngôn ngữ chính
- TypeScript
- Star
- 14.5k
- Fork
- 2.2k
- Merge trung bình
- 5 ngày 23 giờ
- Pull request đã merge (30 ngày)
- 12
Mô tả
### 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,
});
})}
);
```
Hướng dẫn đóng góp
Hướng nghiên cứu
Bắt đầu từ phần mã xử lý children gần dòng 278 của src/components/Card/Card.tsx và tái hiện sự cố bằng cách truyền một React.Fragment vào Card. Kiểm tra cách các children được clone nhận props và xác minh rằng các children của Fragment được render mà không gây ra lỗi runtime hoặc việc đưa props không hợp lệ vào.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- react-native, typescript
- Lĩnh vực
- mobile
- Loại issue
- Lỗi
- Độ khó
- 2/5
- Thời gian dự kiến
- 1-3 giờ
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Đặc tả rõ ràng
- Mức phù hợp với người mới
- 45/100