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;

其他详情：

1. “引导程序”：“^5.0.2”
2. “反应”：“^ 17.0.2”
3. “反应引导”：“^ 1.6.1”

导入/导出组件时我错过了什么吗？ 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

升级当前版本的 react bootstrap 以匹配相应的 bootstrap 版本。 版本2.0.0手风琴文档

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

方案二

降级当前版本的 bootstrap 以匹配 react bootstrap 的相应版本，并使用版本1.6.1 Accordion Docs中的代码片段

npm uninstall bootstrap
npm i bootstrap@4.6.0

bootstrap 和 react-bootstrap 兼容性表