Bootstrap Reactstrap Collapse 不适用于组件列表

Question

无法弄清楚为什么我的组件列表根本没有折叠。我无法让他们改变，觉得我错过了一些微小的东西。我已经尝试了两个和标签，但都没有用。

组件

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 有 bootstrap

的所有链接

 <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;
}

我错过了什么？？？

我试过从这个堆栈溢出解决方案中复制：

和 getbootstrap.com 官方示例，但它不起作用，我在这上面花费了太多时间。

Answer 1

我认为您不应该使用 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 is not working with list of components

reactjs

twitter-bootstrap

reactstrap