React-Bootstrap-Table列格式化器未重绘：悬浮显示取消按钮问题

你遇到的核心问题是：普通函数格式化器里的局部变量无法触发React重渲染，而父组件共享的useState会导致所有单元格状态同步。下面是两种可行的解决方案：

方案一：用独立组件维护单元格自身状态 #

把格式化器改成独立的React组件，每个单元格实例拥有自己的hover状态，状态变化会触发组件重渲染：

import { useState } from 'react';

// 自定义单元格组件
const NameCell = ({ cell, row }) => {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <div
      className="row"
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      <div className="col-10">{cell}</div>
      <div className="col-2" style={{ display: isHovered ? 'block' : 'none' }}>
        <img
          src="cancel.png"
          style={{ maxWidth: 20, cursor: 'pointer' }}
          alt="取消"
        />
      </div>
    </div>
  );
};

// 列配置中使用该组件
const tableColumns = [
  {
    dataField: "name",
    text: "Name",
    sort: true,
    formatter: (cell, row) => <NameCell cell={cell} row={row} />,
  },
  // 其他列配置...
];

方案二：纯CSS实现（推荐） #

不需要React状态，利用CSS的:hover伪类直接控制元素显示，性能更优：

/* 全局样式或组件内样式 */
.name-cell-container .cancel-btn {
  display: none;
}

.name-cell-container:hover .cancel-btn {
  display: block;
}

// 格式化器组件
const NameCell = ({ cell, row }) => {
  return (
    <div className="row name-cell-container">
      <div className="col-10">{cell}</div>
      <div className="col-2 cancel-btn">
        <img
          src="cancel.png"
          style={{ maxWidth: 20, cursor: 'pointer' }}
          alt="取消"
        />
      </div>
    </div>
  );
};

// 列配置
const tableColumns = [
  {
    dataField: "name",
    text: "Name",
    sort: true,
    formatter: (cell, row) => <NameCell cell={cell} row={row} />,
  },
  // 其他列...
];

为什么之前的方法无效？ #

• 普通函数格式化器中的局部变量：变量值改变不会触发React重新渲染，所以视图不会更新；
• 父组件的useState：所有单元格共享同一个状态，会导致悬浮任意单元格时所有取消按钮都显示，且状态异步更新的特性也会导致交互延迟。

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