antd中的Protable组件设置onRow属性后双击显示<Modal/>组件的内容

你可以使用Antd的Table组件的onRow属性来监听行的双击事件，然后在事件处理函数中弹出一个Modal组件来显示该行的内容。

以下是一个示例代码：

import { Table, Modal } from 'antd';

const dataSource = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  },
];

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
];

const MyTable = () => {
  const [visible, setVisible] = useState(false);
  const [selectedRow, setSelectedRow] = useState(null);

  const handleRowDoubleClick = (record) => {
    setSelectedRow(record);
    setVisible(true);
  };

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

  return (
    <>
      <Table
        dataSource={dataSource}
        columns={columns}
        onRow={(record) => ({
          onDoubleClick: () => {
            handleRowDoubleClick(record);
          },
        })}
      />
      {selectedRow && (
        <Modal
          visible={visible}
          onCancel={handleModalClose}
          onOk={handleModalClose}
        >
          <p>{selectedRow.name}</p>
          <p>{selectedRow.age}</p>
          <p>{selectedRow.address}</p>
        </Modal>
      )}
    </>
  );
};

export default MyTable;

在这个示例中，我们使用了Antd的Table组件来渲染一个表格，然后监听了行的双击事件，并在事件处理函数中设置了当前选中的行，并显示了一个Modal组件来显示该行的内容。注意，我们使用了useState来保存当前选中的行和Modal组件的可见性状态。