[英]React: React-Bootstrap Collapse is not working
Started using React-Bootstrap today and I want to make a collapsable card.今天开始使用 React-Bootstrap,想做一张可折叠的卡片。 Using Collapse component but it's not working.
使用 Collapse 组件但它不起作用。 Any tips?
有小费吗? My code:
我的代码:
import { RiArrowDownSLine, RiArrowUpSLine } from "react-icons/ri";
import { Collapse } from "react-bootstrap";
import "./Card.css";
const Card = (props) => {
const data = props.data;
var [isToggled, setToggle] = useState(false);
console.log(isToggled)
return (
<div className="wrapper">
<div className="header spbtw">
<div className="header-title ml1">
{props.title || `Insira um tìtulo`}
</div>
<RiArrowDownSLine
className="arrow mr1"
size={25}
onClick={() => setToggle(!isToggled)}
aria-controls="collapse"
/>
</div>
<Collapse in={isToggled}>
<div className="list" id="collapse">
{data.map(d => (
<div className="list-item ml1" key={d["title"]}>
{d[`title`]}
</div>
))}
</div>
</Collapse>
</div>
);
};
export default Card;
Thanks in advance!提前致谢!
Working example by your codes is SandboxCodes , you are forgot to import css file in the index.js like this import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
您的代码的工作示例是SandboxCodes ,您忘记像这样在 index.js 中导入 css 文件
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
Thanks Hakob, it worked.谢谢 Hakob,它奏效了。 It happened that a class "show" was being added, but it was not defined, as I hadn't imported bootstrap.
碰巧添加了一个 class “show”,但它没有定义,因为我没有导入 bootstrap。 Thank you so much!
太感谢了!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.