[英]Using Bootstrap React Accordion
I want to use Bootstrap's Accordion in my React project and I downloaded npm package for it.我想在我的 React 项目中使用 Bootstrap 的 Accordion,我为它下载了 npm 包。
So basically I want to use it like this:所以基本上我想像这样使用它:
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>
</>
);
}
But I am getting an error like this: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.但是我收到这样的错误:错误:元素类型无效:需要一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到:未定义。 You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
您可能忘记从定义组件的文件中导出组件,或者您可能混淆了默认导入和命名导入。
So do you have any idea why I am getting this error?那么你知道为什么我会收到这个错误吗?
Thanks...谢谢...
Ok, as I was saying in the comments its an issue of the modules you're importing.好的,正如我在评论中所说,这是您要导入的模块的问题。
You're using你正在使用
import {
Card,
CardBody,
CardHeader,
CardTitle,
Row,
Col,
} from "reactstrap";
for your Card components, but you're using the Accordion.Toggle as={Card.Header}
from the API doc example.用于 Card 组件,但您使用的是 API 文档示例中的
Accordion.Toggle as={Card.Header}
。 Here they are using the <Card />
component within the package 'react-bootstrap'
.在这里,他们使用包
'react-bootstrap'
的<Card />
组件。 To get the header from this Card, you call it as a property of the Card object like this: Card.Header
.为了从该卡获得的标题,你把它作为像这样的卡对象的属性:
Card.Header
。
You are using <CardHeader /> from 'reactstrap'
so you need to do this in your Accordion.Toggle components:您正在使用
<CardHeader /> from 'reactstrap'
因此您需要在 Accordion.Toggle 组件中执行此操作:
//this
Accordion.Toggle as={CardHeader}
//not this
Accordion.Toggle as={Card.Header}
Such a little thing, but be careful when using multiple styling packages because they often have very similar names!这么小的事情,但是在使用多个样式包时要小心,因为它们通常具有非常相似的名称!
Additionally, and I would recommend this另外,我会推荐这个
Use just one library for your style components.只为您的样式组件使用一个库。 If
'reactstrap'
doesn't have that Accordion functionality you're looking for, consider using the style components from 'react-bootstrap'
instead.如果
'reactstrap'
没有您正在寻找的 Accordion 功能,请考虑使用来自'react-bootstrap'
的样式组件。
This way you can be sure that you're always using the same component that you're important and one little period or dot doesn't crash your program.通过这种方式,您可以确保始终使用与您重要的相同的组件,并且一个小句点或点不会使您的程序崩溃。
I use Material UI : '@material-ui/core'
so I'm a bit biased here, but I absolutely love it,我使用 Material UI :
'@material-ui/core'
所以我在这里有点偏颇,但我非常喜欢它,
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.