react-table在Popover中行展开功能失效的问题求助

问题现象 #

全站使用react-table组件时功能正常，但将其放入react-bootstrap的Popover组件内后，表格能正常显示，但行展开功能失效——点击展开操作后，展开的数据仅短暂渲染随即消失。

问题原因 #

问题出在OverlayTrigger的rootClose属性上。当点击react-table的展开按钮时，事件会向上冒泡到OverlayTrigger组件，被误判为点击了Popover外部区域，触发Popover关闭逻辑，导致刚展开的内容直接被销毁。

解决方案 #

方案一：阻止Popover内部事件冒泡（推荐） #

直接在Popover组件上绑定点击事件，阻止事件向上冒泡到OverlayTrigger，这样rootClose只会在点击Popover外部时触发，既保留了点击外部关闭的交互，又解决了展开失效的问题：

import { OverlayTrigger, Popover } from 'react-bootstrap';
import ReactTable from 'react-table';

export const sampleTable = observer(class sampleTable extends React.Component {
  render() {
    const table = <ReactTable 
      data={tableData} 
      pivotBy={["parent"]} 
      columns={tableColumn}
    />;

    return (
      <>
        <OverlayTrigger 
          className="popover"
          popperConfig={{ modifiers: { preventOverflow: { enabled: false } } }}
          placement={row.distance < 400 ? "auto" : "left"}
          trigger="click" 
          rootClose 
          overlay={
            <Popover onClick={(e) => e.stopPropagation()}>
              {table}
            </Popover>
          }
        >
          <p>some data </p>
        </OverlayTrigger>
      </>
    );
  }
});

方案二：自定义展开按钮并阻止单个事件冒泡 #

如果需要更精细的控制，可以给react-table的展开列自定义渲染，单独阻止展开按钮的事件冒泡：

1. 先修改表格列配置，添加自定义展开列：

// 自定义展开列，替换默认的展开按钮
const customColumns = [
  {
    Header: '',
    id: 'customExpander',
    width: 40,
    Cell: ({ row }) => (
      <span
        onClick={(e) => {
          e.stopPropagation(); // 阻止事件冒泡
          row.toggleExpanded(); // 手动触发展开/收起
        }}
        style={{ cursor: 'pointer', textAlign: 'center' }}
      >
        {row.isExpanded ? '▼' : '▶'}
      </span>
    )
  },
  ...tableColumn // 原有的列配置
];

2. 在组件中使用自定义列：

import { OverlayTrigger, Popover } from 'react-bootstrap';
import ReactTable from 'react-table';

export const sampleTable = observer(class sampleTable extends React.Component {
  render() {
    const table = <ReactTable 
      data={tableData} 
      pivotBy={["parent"]} 
      columns={customColumns}
    />;

    return (
      <>
        <OverlayTrigger 
          className="popover"
          popperConfig={{ modifiers: { preventOverflow: { enabled: false } } }}
          placement={row.distance < 400 ? "auto" : "left"}
          trigger="click" 
          rootClose 
          overlay={<Popover>{table}</Popover>}
        >
          <p>some data </p>
        </OverlayTrigger>
      </>
    );
  }
});

方案三：移除rootClose属性（不推荐） #

如果业务允许不需要点击外部关闭Popover，可以直接移除rootClose属性，这样Popover只会在再次点击触发元素时关闭，但会牺牲部分交互体验。

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