使用 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>
    </>
  );
}

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

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

谢谢...

Answer 1

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

您正在使用

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

用于您的 Card 组件，但您使用的是 API 文档示例中的 Accordion.Toggle as={Card.Header}。他们在这里使用包 'react-bootstrap' 中的 <Card /> 组件。要从 this Card 中获取 header，您可以将其称为 Card object 的属性，如下所示：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' 所以我这里有点偏，但我绝对喜欢它，

使用 Bootstrap React 手风琴

Using Bootstrap React Accordion

accordion

reactjs

react-bootstrap