antd实现双击一条信息弹出Card组件以及信息

可以通过在antd的List组件的item上添加onDoubleClick事件来实现双击弹出Card组件，具体实现代码如下：

import { List, Card } from 'antd';
import React, { useState } from 'react';

const data = [
  {
    title: '信息1',
    content: '信息1的详细内容',
  },
  {
    title: '信息2',
    content: '信息2的详细内容',
  },
  {
    title: '信息3',
    content: '信息3的详细内容',
  },
];

const DoubleClickList = () => {
  const [visible, setVisible] = useState(false);
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');

  const handleDoubleClick = (item) => {
    setTitle(item.title);
    setContent(item.content);
    setVisible(true);
  };

  const handleCancel = () => {
    setVisible(false);
  };

  return (
    <>
      <List
        dataSource={data}
        renderItem={(item) => (
          <List.Item onDoubleClick={() => handleDoubleClick(item)}>
            <List.Item.Meta title={item.title} />
          </List.Item>
        )}
      />
      <Modal visible={visible} onCancel={handleCancel}>
        <Card title={title}>
          <p>{content}</p>
        </Card>
      </Modal>
    </>
  );
};

export default DoubleClickList;

在这里，我们实现了一个名为DoubleClickList的组件，它包装了antd的List组件，并添加了双击事件。当用户双击某个item时，会弹出一个Modal组件，其中包含了Card组件，显示了该item的title和content。用户可以在Modal中查看该item的详细内容。