React Bootstrap Accordion 错误：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件）答案

【问题标题】：React Bootstrap Accordion Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components)React Bootstrap Accordion 错误：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件）
【发布时间】：2021-09-27 12:35:12
【问题描述】：

我正在为我的第一个引导代码而苦苦挣扎。

我想使用来自here 的 react-bootstrap 代码添加 Accordion。

我想我也已经导入了正确的库。

但我仍然有这个错误： “错误：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：未定义。您可能忘记从定义它的文件中导出组件，或者您可能混淆了默认导入和命名导入。”

如果有人可以提供帮助，这是我的代码，非常感谢^^ 雨果

import React, { Component } from "react";
import { Accordion } from 'react-bootstrap';
import Card from "react-bootstrap/Card";
import "bootstrap/dist/css/bootstrap.min.css";

export class Maturite extends Component {
  render() {
      return (
        <div>
                  <div style={{marginTop: '150px'}}></div>

                  {/* This is the 1st method from react bootstrap for an Accordion which is NOT working for me  */}
                  <Accordion>
                    <Accordion.Item eventKey="0">
                        <Accordion.Header>Accordion Item #1</Accordion.Header>
                        <Accordion.Body>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                        </Accordion.Body>
                    </Accordion.Item>
                    </Accordion>

                    {/* This is a 2nd method for an Accordion which is working for me  */}
                    <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>
              </div>
      );
  }
}

export default Maturite;

import React, { Component } from "react";
import { Accordion } from 'react-bootstrap';
import Card from "react-bootstrap/Card";
import "bootstrap/dist/css/bootstrap.min.css";

export class Maturite extends Component {
  render() {
      return (
        <div>
                  <div style={{marginTop: '150px'}}></div>

                  {/* This is the 1st method from react bootstrap for an Accordion which is NOT working for me  */}
                  <Accordion>
                    <Accordion.Item eventKey="0">
                        <Accordion.Header>Accordion Item #1</Accordion.Header>
                        <Accordion.Body>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                        </Accordion.Body>
                    </Accordion.Item>
                    </Accordion>

                    {/* This is a 2nd method for an Accordion which is working for me  */}
                    <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>
              </div>
      );
  }
}

export default Maturite;

【问题讨论】：

我在 React boostrap 中使用 Accordion 时遇到了同样的问题。这很奇怪，因为其他组件导入并且工作正常，似乎在这里遇到了一些障碍。如果我找到解决方案，会通知您。
如果您尝试从 react-bootstrap 库中导入任何其他组件，您是否会遇到此错误？对我来说，其他组件仍然可以正常工作——但这一个给了我同样的错误。我确实在他们的discord channel 上发了一条消息——如果有任何事情发生，或者我发现我做错了什么，我会及时通知你；P
npm install react-bootstrap@next bootstrap@5.1.0 运行这个命令

标签： reactjs bootstrap-4 react-bootstrap

【解决方案1】：

您要导入什么版本的 Bootstrap？

您正在使用的不起作用的组件的布局（使用 Accordion.Header / .Body）适用于最新的引导程序测试版（Bootstrap 5.0 / v2.0.0-beta.4）。如果您使用的是 Bootstrap 4.0 (v1.6.1)，则该组件具有不同的格式，使用 Cards（适合您的那种）。

【讨论】：

谢谢！忘记将我的文档切换到 4.0。