Ant-design 中的 React 和 ExpandedRow Render

Question

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

Answer 1

查看 antd 文档 AntD/#expandable。

很简单。 AntD tables 有参数 expandable 接受许多变量，例如 expandedRowKeys 保存的行已经扩展，onExpand 是一个被调用的方法当您单击该图标将其展开时。一种简单的方法是创建自己的变量来保存像这样扩展的密钥

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

并创建一个新方法，用于在行展开时如此

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

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

<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);

Ant-design 中的 React 和 ExpandedRow Render

React and ExpandedRow Render in Ant-design

reactjs

antd