react+TS点击按钮出现气泡弹窗

点击文字标签或者按钮以卡片形式显示更多内容，这种样式的实现方法都类似，我用的ui框架是ant design

气泡卡片 Popover - Ant Design点击/鼠标移入元素，弹出气泡式的卡片浮层。https://ant.design/components/popover-cn/我就拿第一种比较典型的样式来讲解

<Popover content={BubblingStaff} trigger="click">
      <Space style={{ color: '#1890FF' }}>查看更多</Space>
</Popover>

其中trigger为触发方式，有hover 鼠标悬浮出现 focus 聚焦出现 click 单击出现，

需要这个title，可以设置 title="Title" ，我不需要就没加

 content花括号里的是个函数，也可以进行传参，我当时传了数据，里面参数是自己定义的

 <Popover

                trigger="click"

                content={() =>

                  BubblingStaff(entity.userInfo.map((item) => item.userName).filter(onlyUnique))

                }

              >

                <Space style={{ color: '#1890FF' }}>查看更多</Space>

     </Popover>

 

const BubblingStaff = (userNames: string[]) => {

    return (

      <div style={{ maxWidth: 250 }}>

        {userNames.map((item, index) => (

          <Tag color="processing" key={index} style={{ margin: 5 }}>

            {item}

          </Tag>

        ))}

      </div>

    );

  };

 如果想做第二种指向方向不同的，可以看文档，各个方向都有