react-bootstrap 手风琴未加载

Question

我正在尝试将 react-bootstrap 与 Bootstrap 一起使用 5. 我想在我的一个页面中使用 Accordion。为此，我只是从该页面复制了结构-> https://react-bootstrap.netlify.app/components/accordion/。但是当我打开页面时，浏览器显示这个错误-

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`.

这是我使用这个组件的代码

import Accordion from 'react-bootstrap/Accordion';

const Questions = () => (
    <Accordion defaultActiveKey="0" flush>
        <Accordion.Item eventKey="0">
            <Accordion.Header>Question #1</Accordion.Header>
            <Accordion.Body>
                Answer to the Question #1
            </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="1">
            <Accordion.Header>Question #2</Accordion.Header>
            <Accordion.Body>
                Answer to the Question #2
            </Accordion.Body>
        </Accordion.Item>
    </Accordion>
);


export default Questions;

其他详情：

"bootstrap": "^5.0.2"
“反应”：“^17.0.2”
"react-bootstrap":"^1.6.1"

我在 importing/exporting 组件时是否遗漏了什么？ TIA.

Answer 1

我通过用最新的 v2.0.0beta 替换 react-bootstrap v1.6.1 解决了这个问题 -> https://www.npmjs.com/package/react-bootstrap/v/2.0.0-beta.0

npm uninstall react-bootstrap
npm i react-bootstrap@2.0.0-beta.0

希望这能解决您的问题

Answer 2

问题原因

问题是您在安装 ^1.6.1 版本时使用了 latest v2.0.0 中的片段。

解决方案 1

升级当前版本的反应 bootstrap 以匹配 bootstrap 的相应版本。 version 2.0.0 Accordion Docs

npm uninstall react-bootstrap
npm i react-bootstrap@2.2.0

解决方案 2

降级 bootstrap 的当前版本以匹配 React bootstrap 的相应版本并使用 version 1.6.1 Accordion Docs

中的代码段

npm uninstall bootstrap
npm i bootstrap@4.6.0

bootstrap & react-bootstrap compatibility table

react-bootstrap 手风琴未加载

react-bootstrap Accordion not loading

reactjs

react-bootstrap

bootstrap-5

问题原因

解决方案 1

解决方案 2