Hướng dẫn react-bootstrap accordion toggle not working - chuyển đổi đàn accordion Reac-bootstrap không hoạt động

Tôi đang cố gắng sử dụng phản ứng bootstrap với bootstrap 5. Tôi muốn sử dụng accordion trong một trong các trang của mình. Vì vậy, tôi chỉ sao chép cấu trúc từ trang này-> https://react-bootstrap.netlify.app/components/accordion/. Nhưng khi tôi mở trang, trình duyệt hiển thị lỗi này-

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `Questions`.

Đây là mã của tôi đang sử dụng thành phần này

import Accordion from 'react-bootstrap/Accordion';

const Questions = () => (
    
        
            Question #1
            
                Answer to the Question #1
            
        
        
            Question #2
            
                Answer to the Question #2
            
        
    
);


export default Questions;

Những chi tiết khác:

1. "Bootstrap": "^5.0.2"
2. "React": "^17.0.2"
3. "react-bootstrap":"^1.6.1"

Tôi có bỏ lỡ bất cứ điều gì trong khi nhập/xuất thành phần không? Tia.

hỏi ngày 9 tháng 7 năm 2021 lúc 17:48Jul 9, 2021 at 17:48

Lý do cho vấn đề

Vấn đề là bạn đang sử dụng đoạn trích từ latest v2.0.0 trong khi bạn đã cài đặt phiên bản ^1.6.1.

Giải pháp 1

Nâng cấp phiên bản hiện tại của React Bootstrap để phù hợp với phiên bản tương ứng cho Bootstrap. Phiên bản 2.0.0 Accordion Docs

npm uninstall react-bootstrap
npm i 

Giải pháp 2

Hạ cấp phiên bản hiện tại của Bootstrap để phù hợp với phiên bản tương ứng cho React Bootstrap và sử dụng đoạn trích từ phiên bản 1.6.1 Accordion Docs

npm uninstall bootstrap
npm i 

Bootstrap & React-bootstrap Bảng tương thích

Đã trả lời ngày 11 tháng 3 lúc 14:20Mar 11 at 14:20

BrunoelobrunoeloBrunoElo

2745 Huy hiệu bạc10 Huy hiệu đồng5 silver badges10 bronze badges

Điều kiện tiên quyết

• Tôi đã tìm kiếm các vấn đề trùng lặp hoặc đóng
• Tôi đã xác nhận bất kỳ HTML nào để tránh các vấn đề phổ biến
• Tôi đã đọc các hướng dẫn đóng góp

Mô tả vấn đề

Tôi đang làm việc với React 17.0.2 và sử dụng Bootstrap với CDN. Khi tôi thực hiện lớp accordion, các mục không thể bị sụp đổ, không thể mở rộng hoặc đóng. Tôi đang sử dụng cùng một mã chính xác được cung cấp trên các tài liệu accordion, nó không hoạt động với bất kỳ trường hợp sử dụng nào được cung cấp ở đó.

Giảm các trường hợp thử nghiệm

  

    

      
        Accordion Item #1
      
    
    

      

        This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
      
    
  
  

    

      
        Accordion Item #2
      
    
    

      

        This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
      
    
  
  

    

      
        Accordion Item #3
      
    
    

      

        This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
      
    
  

Bạn đang thấy vấn đề hệ điều hành nào?

Linux

Bạn đang thấy vấn đề gì về trình duyệt?

Trình duyệt Chrome

Bạn đang sử dụng phiên bản bootstrap nào?

v5.1