ag-grid-react 27.1.0：自定义列组件选后关闭及API调用方案咨询

因为ag-grid会缓存自定义组件实例，常规的useState状态更新无法触发组件重渲染，导致显隐控制失效，这里给你几个可行的实现方式：

方法1：使用useRef维护实例状态 + 直接操作DOM #

放弃useState，改用useRef存储显隐状态，直接通过DOM操作控制选项列表的显示/隐藏，这种方式不依赖组件重渲染：

import { useRef, useEffect } from 'react';

const CustomFilter = (props) => {
  const dropdownRef = useRef<HTMLDivElement>(null);

  // 切换下拉框显隐
  const toggleDropdown = () => {
    dropdownRef.current?.classList.toggle('hidden');
  };

  // 选择选项后关闭并调用API
  const handleOptionSelect = async (option) => {
    // 调用目标API
    await fetch(`/api/your-operation?value=${option}`);
    // 关闭下拉框
    dropdownRef.current?.classList.add('hidden');
    // 可选：通知表格刷新数据
    props.api?.refreshCells();
  };

  // 初始化时隐藏下拉框
  useEffect(() => {
    dropdownRef.current?.classList.add('hidden');
  }, []);

  return (
    <div className="custom-filter-container">
      <button onClick={toggleDropdown}>选择操作</button>
      <div ref={dropdownRef} className="dropdown-options">
        {['导出数据', '标记已读', '批量删除'].map(opt => (
          <div 
            key={opt} 
            onClick={() => handleOptionSelect(opt)}
            className="option-item"
          >
            {opt}
          </div>
        ))}
      </div>
    </div>
  );
};

// 配套CSS
/*
.custom-filter-container {
  position: relative;
}
.dropdown-options {
  position: absolute;
  top: 100%;
  left: 0;
  border: 1px solid #eee;
  background: white;
  padding: 8px 0;
  min-width: 120px;
}
.option-item {
  padding: 6px 12px;
  cursor: pointer;
}
.option-item:hover {
  background: #f5f5f5;
}
.hidden {
  display: none;
}
*/

方法2：利用ag-grid组件实例引用控制 #

如果需要从外部控制组件显隐，可以通过ag-grid的getFrameworkComponentInstance方法获取组件实例，调用内部方法：

1. 在自定义组件中暴露控制方法：

const CustomFilter = (props) => {
  const dropdownRef = useRef<HTMLDivElement>(null);

  // 暴露给外部的方法
  const closeDropdown = () => {
    dropdownRef.current?.classList.add('hidden');
  };

  // 把方法挂载到props上，方便外部获取
  useEffect(() => {
    props.closeDropdown = closeDropdown;
  }, []);

  // ... 其他逻辑同方法1
};

2. 在外部通过grid API获取组件实例并调用方法：

// 比如在表格的某个按钮点击事件中
const handleExternalAction = () => {
  const column = gridApi.getColumn('your-column-key');
  const filterComponent = column.getFilterInstance();
  filterComponent.closeDropdown();
};

你可能遗漏的点 #

1. ag-grid的自定义组件（如过滤器、表头组件）是被框架缓存复用的，useState的状态更新不会触发组件重渲染，因为ag-grid不会主动触发组件的更新周期，必须通过DOM操作或实例级状态来控制UI。
2. 调用API后如果需要更新表格数据，记得调用props.api.refreshCells()或者props.api.setRowData()来触发表格刷新。

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