react-bootstrap手风琴未加载

IT技术 reactjs react-bootstrap bootstrap-5
2022-07-16 23:44:11

我正在尝试将 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. “react”:“^17.0.2”
  3. “react引导”:“^1.6.1”

导入/导出组件时我错过了什么吗?TIA。

2个回答

我通过用最新的 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

我希望这能解决你的问题

问题的原因

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

解决方案 1

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

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

解决方案 2

降级当前版本的引导程序以匹配react引导程序的相应版本并使用版本1.6.1手风琴文档中的片段

npm uninstall bootstrap
npm i bootstrap@4.6.0

bootstrap & react-bootstrap 兼容性表