React中点击表格行内按钮时如何在按钮下方渲染展开操作列表

需求说明 #

• 页面承载多行数据表格，仅当点击选中某一行时，该行的垂直三点样式更多操作（kebab）按钮才会展示
• 点击kebab按钮时，需在按钮正下方展开操作项列表浮层
• 参考设计效果：
  

现有实现基础 #

当前已完成的逻辑：

1. 行选中状态下kebab按钮的渲染逻辑，代码如下：

{
  id: 'my-button',
  Cell: ({ cell }: CellProps<MyCell>) => {
    if (cell.row.index === selectedIndex) {
      return (
        <div>
          <Button
            icon={<ThreeDots />}
            onClick={toggleModal}
          />
        </div>
      );
    }
    return <div></div>;
  }
}

2. 已定义初始值为false的布尔状态变量控制浮层显隐，绑定在按钮上的toggleModal方法可正常切换该状态值
3. 已尝试的浮层渲染写法存在定位异常，无法对齐到按钮下方：

{isModalOpened ? <div className='absolute'>test</div> : null}

可行实现方案 #

你写的absolute定位浮层错位/不显示，核心是两个问题：

• 包裹按钮的父容器没有加position: relative，absolute定位的元素会向上查找最近的非static定位元素作为定位参考，找不到就会相对整个页面定位，必然出现位置偏移
• 浮层没有和按钮放在同一个父容器下，无法准确对齐按钮位置
  按下面的方式修改即可实现需求：

第一步：给按钮容器添加相对定位 #

给包裹Button的div加上relative类，将其作为下拉浮层的定位参考父元素，保证浮层始终相对当前按钮定位，不会随页面其他元素布局偏移。

第二步：将下拉浮层放到按钮容器内部，补全定位样式 #

不要把浮层放到容器外部，直接放在按钮同级的相对定位容器中，补充必要的定位、层级、基础样式：

• 加top-full让浮层顶部贴紧按钮底部
• 加right-0让浮层和按钮右对齐，避免超出表格列范围
• 加z-10提高浮层层级，保证浮层显示在表格其他内容上方，不会被遮挡
  改完的完整Cell代码如下：

{
  id: 'my-button',
  Cell: ({ cell }: CellProps<MyCell>) => {
    if (cell.row.index === selectedIndex) {
      return (
        {/* 新增relative作为定位参考父级 */}
        <div className="relative">
          <Button
            icon={<ThreeDots />}
            onClick={toggleModal}
          />
          {/* 下拉浮层放在容器内，补全定位和基础样式 */}
          {isModalOpened ? (
            <div className='absolute top-full right-0 z-10 bg-white shadow rounded border py-1 min-w-[120px]'>
              {/* 替换为实际操作项即可，示例如下 */}
              <div className="px-3 py-1.5 hover:bg-gray-50 cursor-pointer">编辑</div>
              <div className="px-3 py-1.5 hover:bg-gray-50 cursor-pointer text-red-600">删除</div>
            </div>
          ) : null}
        </div>
      );
    }
    return <div></div>;
  }
}

必做体验优化 #

• 补充点击外部自动关闭逻辑：给document绑定点击事件监听，判断点击目标不在按钮和浮层区域内时，将浮层显隐状态设为false
• 监听表格滚动事件，滚动时自动关闭浮层，避免滚动过程中浮层和按钮错位
• 如果项目中已经引入了AntD、MUI这类组件库，直接用库自带的Dropdown组件包裹按钮，将操作列表作为Dropdown的下拉内容传入即可，不需要手动写定位逻辑，兼容性和稳定性更高。

内容的提问来源于stack exchange，提问作者Leo Messi