Bootstrap Reactstrap Collapse无法使用组件列表

如何解决Bootstrap Reactstrap Collapse无法使用组件列表

难以弄清为什么我的组件列表根本没有崩溃。我无法让他们改变，并感到我缺少一些微小的东西。我已经尝试了和标签，但都没有用。

组件

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官方示例，但是它不起作用，我花了太多时间在原样上。

解决方法

我认为您不应该使用jQuery和原始的Bootstrap脚本。 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>
  );
}

Bootstrap Reactstrap Collapse无法使用组件列表

如何解决Bootstrap Reactstrap Collapse无法使用组件列表

解决方法

相关推荐