React Bootstrap Accordion 不適用於 NextJS

Question

我已將我的申請從 CRA 移至 CNA。 一切都像魅力一樣工作，但 Bootstrap 手風琴根本不起作用。 我已經嘗試了所有可能的方法，但仍然無法找到解決此問題的方法。

錯誤信息：

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.

我嘗試以多種方式導入它，但沒有任何效果。

import Accordion from 'react-bootstrap/Accordion';

import {Accordion} from 'react-bootstrap/Accordion';

import Accordion from 'react-bootstrap';

import {Accordion} from 'react-bootstrap';

如果我正在使用import Accordion from 'react-bootstrap';

錯誤信息：

除此以外

提前致謝 ：）

Answer 1

我不確定，你試過這個嗎？

import Accordion from 'react-bootstrap';
import Item from 'react-bootstrap';

或者

import { Accordion , Item } from 'react-bootstrap';

Answer 2

從“react-bootstrap”導入{手風琴，卡片}；

<Accordion>
    <Card>
      <Accordion.Toggle as={Card.Header} eventKey="0">
        TAB 1
      </Accordion.Toggle>

      <Accordion.Collapse eventKey="0">
        <Card.Body>This is first tab body</Card.Body>
      </Accordion.Collapse>
    </Card>

    <Card>
      <Accordion.Toggle as={Card.Header} eventKey="1">
        TAB 2
      </Accordion.Toggle>

      <Accordion.Collapse eventKey="1">
        <Card.Body>This is second tab body</Card.Body>
      </Accordion.Collapse>
    </Card>
  </Accordion>

Answer 3

您可能遇到的問題是應用中安裝的react-bootstrap與您在其網頁上使用的文檔之間存在版本差異。 網頁https://react-bootstrap.github.io默認為他們文檔v2.0.0-rc.0 (Bootstrap 5.1)版本（你可以在他們的 github 和不和諧圖標旁邊看到這個，右上角......）您需要將文檔更改為v1.6.1 (Bootstrap 4) ，以便列出有關組件的正確文檔。

例如v2.0.0-rc.0你創建一個手風琴如下：

<Accordion defaultActiveKey="0">
  <Accordion.Item eventKey="0">
    <Accordion.Header>Accordion Item #1</Accordion.Header>
    <Accordion.Body>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
      est laborum.
    </Accordion.Body>
  </Accordion.Item>
</Accordion>

而在上一組文檔中，它是：

<Accordion defaultActiveKey="0">
  <Card>
    <Card.Header>
      <Accordion.Toggle as={Button} variant="link" eventKey="0">
        Click me!
      </Accordion.Toggle>
    </Card.Header>
    <Accordion.Collapse eventKey="0">
      <Card.Body>Hello! I'm the body</Card.Body>
    </Accordion.Collapse>
  </Card>
</Accordion>

您收到錯誤的具體原因是因為Accordion.Item正在返回一個字符串，當組件Accordion.Item不存在時，react 認為您導出了一些自定義類型代碼，並且由於它找不到該代碼，因此實際上它在期望時返回undefined一個string

長話短說，改變文檔，你會得到答案，或者相反，你可以選擇升級你的react-bootstrap和bootstrap版本，它會做同樣的事情，只要確保你使用正確的文檔來構建你的組件。