AgGrid跨表格行拖拽React应用技术问题咨询

问题1：如何获取右侧表格的行数据？rightApi.rowModel.forEachNode是否可行？ #

• 若要获取选中行数据，更高效的方式是使用rightApi.getSelectedRows()，该方法直接返回选中行的数组，无需手动遍历节点。
• 若要遍历所有行（无论选中状态），rightApi.rowModel.forEachNode((tmp) => {console.log(tmp)})是可行的，但注意tmp是行节点对象，需通过tmp.data获取实际行数据。如果使用客户端行模型，该方法可遍历全部数据；若为无限行模型，仅能遍历当前加载的行。

问题2：能否限制右侧表格最多仅允许10条记录？ #

可以，在处理拖拽添加行的逻辑中加入数量校验即可：

1. 在拖拽完成的回调（如onRowDragEnd或行添加处理函数）中，先获取右侧表格当前行数：

const currentRowCount = rightApi.getDisplayedRowCount();

2. 计算添加后的总条数，若超过10则阻止操作：

const draggedRows = [...]; // 拖拽过来的目标行数据
if (currentRowCount + draggedRows.length > 10) {
  alert('右侧表格最多只能容纳10条记录');
  return; // 终止添加逻辑
}
// 校验通过后执行添加操作
rightApi.applyTransaction({ add: draggedRows });

问题3：首次拖拽行到右侧时删除渲染器报错「Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.」 #

该报错多因首次渲染时React组件未正确转换为DOM节点，或渲染器依赖资源未加载完成导致，可通过以下方案解决：

方案1：添加空值校验并包裹React.memo #

确保渲染器在数据存在时再渲染，同时用React.memo避免不必要的重渲染：

import React from 'react';

const SportRenderer = React.memo((props) => {
  if (!props.node?.data) return null;
  
  return (
    <i
      className="far fa-trash-alt"
      style={{ cursor: 'pointer' }}
      onClick={() => props.api.applyTransaction({ remove: [props.node.data] })}
    ></i>
  );
});

方案2：检查Font Awesome资源加载 #

首次报错可能是Font Awesome图标未加载完成，导致<i>元素无法被识别为有效DOM节点。可提前在项目入口（如index.html）引入Font Awesome资源，或使用本地图标替代。

方案3：升级AgGrid版本 #

部分旧版本AgGrid在处理React单元格渲染器的异步初始化时存在bug，升级到最新稳定版的ag-grid-react可能解决该问题。

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