Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

[ContextMenu] Error when configuring both `text` and `component` on an item

Đang mở
  • Có gì không ổn?
#323 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
50/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
react, typescript
Lĩnh vực
frontend

Hướng nghiên cứu

Bắt đầu từ component ContextMenu và tái hiện ví dụ được cung cấp với một mục chứa cả văn bản và component, sau đó kích hoạt việc render lại bằng cách chọn một mục. Hoàn tất khi việc render lại không còn gây ra lỗi Node.removeChild, văn bản được ưu tiên và component xung đột bị bỏ qua; hãy bổ sung độ bao phủ kiểm thử cho cấu hình này nếu cấu trúc kiểm thử hiện có hỗ trợ.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

bug Impact: Low Severity: Major

The ContextMenu component causes React rendering errors when it re-renders and one of its items is configured with both a text property and a component property. Worst case this breaks the whole app.

While this configuration (having both text and component for a single item) is not supported, the component should handle this gracefully instead of throwing an error. It should prioritize one property (currently it's text) and ignore the other one. Optionally log a warning to the console indicating the misconfiguration.

Example:

const items = [{ text: 'foo', component: <div>bar</div> }];

export default function ContextMenuPage() {
  const [count, setCount] = useState(0);

  return (
    <ContextMenu
      items={items}
      onItemSelected={() => {
        setCount(count + 1);
      }}
    >
      <div>{count} clicks</div>
    </ContextMenu>
  );
}

Error message:

Uncaught DOMException: Node.removeChild: The node to be removed is not a child of this node
    React 24
    performWorkUntilDeadline scheduler.development.js:45
    js scheduler.development.js:223
    js scheduler.development.js:364
    __require chunk-BUSYA2B4.js:3
    js index.js:6
    __require chunk-BUSYA2B4.js:3
    React 2
    __require chunk-BUSYA2B4.js:3
    js React
    __require chunk-BUSYA2B4.js:3
    <anonymous> react-dom_client.js:18075
Ngôn ngữ chính
TypeScript
Star
18
Fork
4
Merge trung bình
44 phút
Pull request đã merge (30 ngày)
9

Chuẩn bị môi trường

Dự án này không cung cấp dev container, Dockerfile hay hướng dẫn đóng góp, nên bạn cần tự thiết lập môi trường: hãy bắt đầu từ README và xem hướng dẫn đóng góp lần đầu của chúng tôi để biết các bước chung.

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của vaadin/react-components

Tất cả issue của vaadin/react-components

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.