如何在MUI的Collapse组件中通过row.name关联对应useState状态？

不要单独声明openOne这类独立状态，改用对象类型的useState来统一管理所有行的折叠状态，就能通过row.name直接匹配对应行的状态项。

步骤1：初始化对象状态 #

把单个状态改成键值对形式，键名对应行的name值：

const [openRows, setOpenRows] = useState({});

步骤2：关联Collapse的in属性 #

直接通过openRows[row.name]获取对应行的折叠状态，默认设为false确保初始是收起状态：

<Collapse in={openRows[row.name] || false} timeout="auto" unmountOnExit>
  {/* 这里放折叠后要展示的内容 */}
</Collapse>

步骤3：实现通用的折叠切换函数 #

写一个能针对指定行切换状态的函数，通过row.name定位要更新的状态项：

const toggleRowCollapse = (rowName) => {
  setOpenRows(prevState => ({
    ...prevState,
    [rowName]: !prevState[rowName]
  }));
};

步骤4：绑定切换事件（示例） #

给每行的展开/折叠按钮绑定上述函数，比如：

<Button onClick={() => toggleRowCollapse(row.name)}>
  {openRows[row.name] ? '收起' : '展开'}
</Button>

为什么不用原来的单个状态？ #

JSX中无法通过字符串拼接（"open"+row.name）直接解析对应变量名，用对象存储状态是更灵活的方案——不管表格有多少行，都能统一管理，不用逐个声明独立状态变量。

内容的提问来源于stack exchange，提问作者PaulPolon