Reactjs 引导折叠不适用于组件列表

我很难弄明白为什么我的组件列表根本没有崩溃。我无法让他们改变，觉得我错过了一些微小的东西。我试过和标签，但都不起作用

组成部分

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;

我错过了什么

我已尝试从此堆栈溢出解决方案复制：

---

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

我认为您不应该使用jQuery和原始引导脚本。Reactstrap已经为您处理了这些。你可以在地图上看到他们的例子。您可以继续使用引导样式表，但我建议删除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/dist/css/bootstrap.min.css”；
从“reactstrap”导入{Card，CardText，Collapse，Button}；
功能故事（道具）{
常量[isOpen，setIsOpen]=useState（false）；
常量切换=（）=>setIsOpen（！isOpen）；
返回(
{道具.故事.标题}
{道具.故事.情节}
+显示更多
);
}

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

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