使用 Bootstrap React Accordion答案

【问题标题】：Using Bootstrap React Accordion使用 Bootstrap React Accordion
【发布时间】：2021-06-20 11:44:07
【问题描述】：

我想在我的 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>
    </>
  );
}

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

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

谢谢...

【问题讨论】：

我现在正在查看它，乍一看我会说你真的应该在这里命名你的函数组件。它不是很好，特别是在开发过程中具有未命名的默认导出。 -- 错误是否指向导致问题的组件？
我认为这是因为每当我删除它时，它都可以正常工作 import Accordion from 'react-bootstrap/Accordion';
你安装了什么 npm 包？ 'react-bootstrap/Accordion' 或 'react-bootstrap'
'react-bootstrap'
但是'react-bootstrap'里面不是Accordion

标签： reactjs accordion react-bootstrap

【解决方案1】：

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

你正在使用

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

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

【讨论】：