使用 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'所以我在這里有點偏頗，但我非常喜歡它，