在行悬停时显示蚂蚁设计弹出框答案

【问题标题】：Show ant design popover on row hover在行悬停时显示蚂蚁设计弹出框
【发布时间】：2021-09-19 01:18:33
【问题描述】：

我在我的 React 项目中使用 ant 设计框架，当悬停在我的表格的任何行时，我很难显示一个 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 dataSource={dataSource} columns={columns} />

而且我不能单独访问每一行。

【问题讨论】：

标签： reactjs antd

【解决方案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>
      </>
    )
  }]

【讨论】：