如何解决使用 Bootstrap React 手风琴
我想在我的 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 {
Card,CardBody,CardHeader,CardTitle,Row,Col,} from "reactstrap";
用于 Card 组件,但您使用的是 API 文档示例中的 Accordion.Toggle as={Card.Header}
。在这里,他们使用包 <Card />
中的 'react-bootstrap'
组件。要从 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'
所以我在这里有点偏颇,但我绝对喜欢它,
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。