AG Grid React：仅评论列启用点击及组件不渲染问题求助

问题a：仅为「Comments」列启用onCellClick事件 #

全局的onCellClicked会响应所有单元格的点击事件，要实现仅「Comments」列触发，直接把点击事件绑定到该列的定义中，而非全局的AgGridReact组件上：

修改列定义代码：

{ 
  headerName: 'Comments', 
  field: 'remarks', 
  valueGetter: () => "Comments...",
  onCellClicked: getComments // 绑定列级点击事件
}

同时移除AgGridReact组件上的全局onCellClicked属性：

<div className="ag-theme-alpine" style={{ height: 600, width: 1845}}>
  <AgGridReact rowData={data} columnDefs={columns}></AgGridReact>
</div>

修改后只有点击「Comments」列的单元格时，才会触发getComments函数。

问题b：点击时React组件未渲染且无控制台日志输出 #

日志无输出的解决 #

如果之前用全局onCellClicked，可能是点击了非「Comments」列导致事件未触发；按照问题a的修改后，点击「Comments」列单元格应该能看到日志。若仍无输出，检查：

• getComments函数是否正确定义（避免箭头函数绑定导致的上下文问题）
• AG Grid版本是否支持列级onCellClicked（v23及以上版本支持）

组件未渲染的解决 #

事件处理函数getComments不能直接返回React组件，React渲染逻辑需在组件的JSX结构中通过状态控制实现：

1. 新增状态存储选中的单元格数据：

const [selectedCommentData, setSelectedCommentData] = useState(null);

2. 修改getComments函数更新状态：

const getComments = (params) => {
  console.log("comments", params);
  setSelectedCommentData(params.data);
  setShowComments(true);
};

3. 在组件JSX中根据状态渲染InDesignSiteResponse：

<div className="ag-theme-alpine" style={{ height: 600, width: 1845}}>
  <AgGridReact rowData={data} columnDefs={columns}></AgGridReact>
</div>
{showComments && selectedCommentData && (
  <InDesignSiteResponse 
    stateChanger={setShowComments} 
    data={selectedCommentData} 
  />
)}

修改后，点击「Comments」列单元格会更新状态，触发组件渲染，同时控制台会输出目标日志。

内容的提问来源于stack exchange，提问作者Pratik das baghel