Ant 设计中的 React 和 ExpandedRow 渲染

Question

我正在使用 Ant Design 表，其中我正在使用行扩展功能。我的查询是当我单击该行正在打开的表格的任何行时，但问题是当我单击其他行时，前一行仍然打开，我只想要这样的功能，如果我单击任何行，另一个已经打开的行应该关闭.....如果有人有解决方案，请在stackBlitz中给我演示......提前谢谢

Answer 1

查看 antd 文档AntD/#expandable。

很简单。 AntD 表的参数expandable 接受许多变量，例如保存行的女巫的expandedRowKeys 已展开，onExpand 是在单击图标以展开它时调用的方法。一种简单的方法是创建自己的变量来保存像这样扩展的键

const [expandedKey, setExpandedKey] = useState(null);

并创建一个新方法，用于当行被展开时

const onExpand = (_, { key }) => setExpandedKey(key);

然后在渲染 AntD 表时传递这些变量

<Table
  columns={columns}
  expandable={{
    expandedRowRender: (record) => (
      <p style={{ margin: 0 }}>{record.description}</p>
    ),
    onExpand: onExpand,
    expandedRowKeys: [expandedKey]
  }}
  dataSource={data}
/>

现场示例：https://codesandbox.io/s/eloquent-http-jxf1m?file=/src/App.js

---

编辑

要在单击_ 图标（打开时）时使其关闭，请将onExpand 方法更改为：

const onExpand = (_, { key }) =>
    expandedKey === key ? setExpandedKey(null) : setExpandedKey(key);

---