如何使 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 (将#修改为@）