在React中使用Bootstrap的Accordion代码,可以按照以下步骤进行:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
useState
钩子来管理Accordion的展开状态。创建一个状态变量isOpen
,初始值为false
,并创建一个函数toggleAccordion
来切换展开状态。import React, { useState } from 'react';
const AccordionExample = () => {
const [isOpen, setIsOpen] = useState(false);
const toggleAccordion = () => {
setIsOpen(!isOpen);
};
return (
<div>
<button className="btn btn-primary" onClick={toggleAccordion}>
Toggle Accordion
</button>
{isOpen && (
<div className="accordion">
<div className="accordion-item">
<h2 className="accordion-header" id="headingOne">
<button
className="accordion-button"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseOne"
aria-expanded="true"
aria-controls="collapseOne"
>
Accordion Item #1
</button>
</h2>
<div
id="collapseOne"
className="accordion-collapse collapse show"
aria-labelledby="headingOne"
data-bs-parent=".accordion"
>
<div className="accordion-body">
Content for Accordion Item #1
</div>
</div>
</div>
</div>
)}
</div>
);
};
export default AccordionExample;
toggleAccordion
函数,从而切换isOpen
的值。当isOpen
为true
时,Accordion会展开显示。这是一个简单的在React中使用Bootstrap Accordion的示例。你可以根据自己的需求进行修改和扩展。如果你想了解更多关于Bootstrap的Accordion组件的信息,可以参考腾讯云的相关产品:Bootstrap Accordion。
领取专属 10元无门槛券
手把手带您无忧上云