在行悬停时显示 ant design 弹出窗口

Question

我在我的 React 项目中使用了 ant 设计框架，并且在将鼠标悬停在我的 Table 的任何行时努力显示 Popover。根据文档，Popover 需要在其他一些组件上创建，例如在 Button 组件上创建的以下示例：

const content = (
  <div>
    <p>Content</p>
    <p>Content</p>
  </div>
)
<Popover content={content} title="Title" trigger="hover">
  <Button>Hover me</Button>
</Popover>

然后显示如下：

我的问题是，如果 table 是以这种方式创建的，如何为 Table 组件的每一行显示 Popover：

<Table dataSource={dataSource} columns={columns} />

而且我无法单独访问每一行。

Answer 1

您可以使用 render 属性:

为列的每个单元格添加弹出窗口

const columns = [
  {
    title: "Name",
    dataIndex: "name",
    key: "name",
    render: (text) => (
      <>
        <Popover
          placement="topLeft"
          title={text}
          content="Here's pop up Text"
          trigger="click"
        >
          <a>{text}</a>
        </Popover>
      </>
    )
  }]

在行悬停时显示 ant design 弹出窗口

Show ant design popover on row hover

reactjs

antd