如何解决如何使 react-collapsed (useCollapse) 工作到地图中?
我已经实现了 react-collapsed 库来使折叠按钮起作用。我需要在循环内实现这个按钮,但我没有找到让它在循环内正常工作的方法。如果我按 1 按钮展开 1 个部分,它会展开循环中的每个部分,因此效果不佳。
import React from "react";
import AllIcons from "../../ui/icons/all-icons";
import TableSellDataCard from "./TableSellDataCard";
import useCollapse from 'react-collapsed';
const TableContent = ({ data,columns,}) => {
const { getCollapseProps,getToggleProps,isExpanded } = useCollapse();
return (
<>
{data.map((item,index) => {
return (
<div key={index}>
<div className="flex px-5 border-b border-gray-form py-2" data-reservation-id={item.id}>
{columns.map(() => {
return (
<div>
<button className="accordion" {...getToggleProps()}>
{isExpanded ? <AllIcons name="AccordeonArrow" /> : <AllIcons name="AccordeonArrowUp" />}
</button>
</div>
);
})}
</div>
<section {...getCollapseProps()}><TableSellDataCard /></section>
</ div>
);
})}
</>
);
};
export default TableContent;
我有一个按钮可以切换该部分,但它会扩展循环内的所有部分。我需要让它发挥作用。按钮 1 仅打开部分 1,按钮 2 仅打开部分 2。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。