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版本，它会做同样的事情，只要确保你使用正确的文档来构建你的组件。