Bootstrap Reactstrap折叠不适用于组件列表
Bootstrap Reactstrap折叠不适用于组件列表
提问于 2020-09-03 04:13:44
我很难弄清楚为什么我的组件列表根本没有折叠。我不能让他们改变，并感觉我错过了一些微小的东西。我已经尝试了和标签，但都不起作用。
组件
import React, { useState } from "react";
import { Card, CardText } from "reactstrap";
function Story(props) {
console.log(props)
return (
<Card className="border m-1 shadow-sm vw-90 card-container" id={props.stories.id}>
<h5>{props.stories.title}</h5>
//This is the part I'm trying to collapse------------------------->
<div className="collapse" id={`${props.stories.id}_text`}>
<CardText className="card-text-sm" aria-expanded="false">
{props.stories.plot}
</CardText>
</div>
// ---------------------------------------------------------------->
<button
className="btn btn-sm btn-link"
type="button"
data-toggle="collapse"
data-target={`#${props.stories.id}_text`}
aria-expanded="false"
aria-controls={`${props.stories.id}_text`}
>
+ Show More
</button>
</div>
</Card>
);
}
export default Story;我的index.html包含引导程序的所有链接
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous"
/>
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"
></script>
</body>和CSS
.card-container {
padding: .4rem 1rem;
line-height: 1.5;
font-size: 1rem;
}
.collapse {
display: block !important;
height: 12rem;
overflow: hidden;
}
.collapse.show {
height: auto;
}
.collapsing {
height: 3rem;
}
.footer a.collapsed::after {
content: "+ Show More";
}
.footer a:not(.collapsed)::after {
content: '- Show Less'
}
.card-text-sm {
font-size: small;
}我错过了什么？
我试着从这个堆栈溢出解决方案中复制：
Bootstrap 4: Display two lines followed by a Read More expandable link
和getbootstrap.com官方的例子，但它不工作，我已经花了太多的时间在这上面。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-09-03 07:53:11
我不认为你应该使用jQuery和原始的引导脚本。Reactstrap已经为你处理这些了。你可以在documentation上看到他们的例子。您可以继续使用Bootstrap样式表，但我建议删除jQuery、bootstrap.min.js和popper脚本。
import "bootstrap/dist/css/bootstrap.min.css";
import { Card, CardText, Collapse, Button } from "reactstrap";
function Story(props) {
const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(!isOpen);
return (
<Card
className="border m-1 shadow-sm vw-90 card-container"
id={props.stories.id}
>
<h5>{props.stories.title}</h5>
<Collapse isOpen={isOpen}>
<CardText className="card-text-sm" aria-expanded="false">
{props.stories.plot}
</CardText>
</Collapse>
<Button type="button" onClick={toggle}>
+ Show More
</Button>
</Card>
);
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63712943
复制相关文章
相似问题
腾讯云开发者
