reactjs - react 引导 Accordion 错误 : Element type is invalid: expected a string (for built-in components) or a class/function (for composite components)

Question

我正在努力处理我的第一个引导代码。
我想使用来自 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;

Answer 1

您要导入什么版本的 Bootstrap？
您使用的组件的布局不起作用(使用 Accordion.Header/.Body)适用于 bootstrap 的最新测试版( Bootstrap 5.0/v2.0.0-beta.4 )。如果您使用的是 Bootstrap 4.0 (v1.6.1)，则该组件具有不同的格式，使用 Cards(适合您的类型)。