使用 Bootstrap React 手风琴

Question

我想在我的 React 项目中使用 Bootstrap 的 Accordion，我为它下载了 npm 包。

所以基本上我想像这样使用它：

import React, { useState, useEffect } from "react";

// reactstrap components
import {
  Card,
  CardBody,
  CardHeader,
  CardTitle,
  Row,
  Col,
} from "reactstrap";

import Accordion from 'react-bootstrap/Accordion';

// core components
import PanelHeader from "components/PanelHeader/PanelHeader.js";


export default function Orders() {

  return (
    <>
      <PanelHeader size="sm" />
      <div className="content">
        <Row>
          <Col xs={12}>
            <Card>
              <CardHeader>
                <CardTitle tag="h4">ORDERS</CardTitle>
              </CardHeader>
              <CardBody>
              <Accordion defaultActiveKey="0">
                <Card>
                  <Accordion.Toggle as={Card.Header} eventKey="0">
                    Click me!
                  </Accordion.Toggle>
                  <Accordion.Collapse eventKey="0">
                    <Card.Body>Hello! I'm the body</Card.Body>
                  </Accordion.Collapse>
                </Card>
                <Card>
                  <Accordion.Toggle as={Card.Header} eventKey="1">
                    Click me!
                  </Accordion.Toggle>
                  <Accordion.Collapse eventKey="1">
                    <Card.Body>Hello! I'm another body</Card.Body>
                  </Accordion.Collapse>
                </Card>
              </Accordion>
              </CardBody>
            </Card>
          </Col>
        </Row>
      </div>
    </>
  );
}

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

那么你知道为什么我会收到这个错误吗？

谢谢...

Answer 1

好的，正如我在评论中所说，这是您要导入的模块的问题。

你正在使用

import {
  Card,
  CardBody,
  CardHeader,
  CardTitle,
  Row,
  Col,
} from "reactstrap";

用于 Card 组件，但您使用的是 API 文档示例中的Accordion.Toggle as={Card.Header} 。 在这里，他们使用包'react-bootstrap'的<Card />组件。 为了从该卡获得的标题，你把它作为像这样的卡对象的属性： Card.Header 。

您正在使用<CardHeader /> from 'reactstrap'因此您需要在 Accordion.Toggle 组件中执行此操作：

//this
Accordion.Toggle as={CardHeader}

//not this

Accordion.Toggle as={Card.Header}

这么小的事情，但是在使用多个样式包时要小心，因为它们通常具有非常相似的名称！

另外，我会推荐这个

只为您的样式组件使用一个库。 如果'reactstrap'没有您正在寻找的 Accordion 功能，请考虑使用来自'react-bootstrap'的样式组件。

通过这种方式，您可以确保始终使用与您重要的相同的组件，并且一个小句点或点不会使您的程序崩溃。

我使用 Material UI : '@material-ui/core'所以我在这里有点偏颇，但我非常喜欢它，