Javascript 从react bootsrap折叠不'；行不通

我试图使用创建一个可折叠的表行

我想创建在单击时展开和折叠的表行，以便显示有关该特定行的更多信息

在react bootstrap页面上，它似乎可以工作，但当我将它复制到a而不是a时，它就停止工作。这是我的代码：

import React, { useState } from 'react';
import Collapse from 'react-bootstrap/Collapse';
import Table from "react-bootstrap/Table";

function OppTable (props) {
    const [open, setOpen] = useState(false);

    return (
      <>
      <Table
      striped bordered hover
      onClick={() => setOpen(!open)}
      aria-controls="example-collapse-text"
      aria-expanded={open}>

        <thead>
            <tr>
                <th>Name</th>
                <th>City</th>
                <th>Last visited</th>
                <th>Visits</th>
                <th>FTE</th>
            </tr>
        </thead>

        <tbody>
        {
            props.opportunities.map(opportunity => {
                return (
                    <>      
                        <tr onClick={() => setOpen(!open)} aria-controls="example-collapse-text" aria-expanded={open}>
                            <td>{opportunity.companyname}</td>
                            <td>{opportunity.city}</td>
                            <td>{opportunity.lastVisit}</td>
                            <td>{opportunity.totalVisits}</td>
                            <td>{opportunity.employees}</td>
                        </tr>
                        <Collapse>
                            <tr id="example-collapse-text">
                                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
                                terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
                                labore wes anderson cred nesciunt sapiente ea proident.
                            </tr>
                        </Collapse>
                    </>
                )

            })
        }
        </tbody>
      </Table>
      </>
    );
  }

export default OppTable;

import React，{useState}来自“React”；
从“反应引导/折叠”导入折叠；
从“反应引导/表格”导入表格；
功能表（道具）{
const[open，setOpen]=useState（false）；
返回(
setOpen（！open）}
aria controls=“示例折叠文本”
aria扩展={open}>
名称
城市
上次访问
拜访
全职员工
{
props.opportunities.map（opportunity=>{
返回(
setOpen（！open）}aria controls=“example collapse text”aria expanded={open}>
{opportunity.companyname}
{机会城市}
{opportunity.LastVisite}
{opportunity.TotalVisitions}
{opportunity.employees}
动物教区的陈词滥调
泰瑞·理查森和乌贼。尼希尔·阿尼姆·凯菲耶·赫尔维蒂卡，工艺啤酒
劳尔·韦斯·安德森是一位杰出的智者。
)
})
}
);
}
导出默认表；

---

有人知道我做错了什么吗？

缺少表的导入语句，您正在使用表，但您没有从react引导导入表

从“反应引导/表格”导入表格

import React，{useState}来自“React”；
从“反应引导/折叠”导入折叠；
//从“反应引导/按钮”导入按钮；
从“反应引导/表格”导入表格；
函数示例（）{
const[open，setOpen]=useState（false）；
返回(
setOpen（！open）}
aria controls=“示例折叠文本”
aria扩展={open}
>
#
名字
1.
做记号
2.
雅各布
3.
小鸟拉里
动物教区的陈词滥调
泰瑞·理查森和乌贼。尼希尔·阿尼姆·凯菲耶·赫尔维蒂卡，工艺啤酒
劳尔·韦斯·安德森是一位杰出的智者。
);
}
导出默认示例；

能否在Codepen/CodeSandbox中提供工作复制品？正确使用表格！，请用第二个封面将所有tr附在表格中。您是否也可以分享您将道具传递给

表格的位置？

？您是否可以按照@sathishkumar的建议进行操作？我已经用我所拥有的编辑了问题中的代码。但崩溃仍然不起作用。

import React, { useState } from 'react';
import Collapse from 'react-bootstrap/Collapse';
// import Button from "react-bootstrap/Button";
import Table from "react-bootstrap/Table";

function Example() {
  const [open, setOpen] = useState(false);

  return (
      <div>
          <Table
              striped bordered hover
              onClick={() => setOpen(!open)}
              aria-controls="example-collapse-text"
              aria-expanded={open}
          >
            <thead>
            <tr>
              <th>#</th>
              <th>First Name</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>1</td>
              <td>Mark</td>
            </tr>
            <tr>
              <td>2</td>
              <td>Jacob</td>
            </tr>
            <tr>
              <td>3</td>
              <td colSpan="2">Larry the Bird</td>

            </tr>
            </tbody>
          </Table>

        <Collapse in={open}>
          <div id="example-collapse-text">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
            terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
            labore wes anderson cred nesciunt sapiente ea proident.
          </div>
        </Collapse>
      </div>
  );
}

export default Example;