AG grid react框架组件单元格渲染器不更新props

Question

我正在使用AgGridReact 构建一个反应功能组件：

const DataGrid = (props) =>
{                                                                           
   const [gridRowData, setGridRowData] = useState([]);
   const [columnDefinition, setColumnDefinition] = useState([]);

useEffect(async () =>
    {
      if(props.name && props.name !== "")
      {
        ... get grid row data and column definition here according to props.name - working fine
      }
    },[props.name]);

let frameworkComponents = {
  customLoadingOverlay: LoadingOverlayTemplate,
      customNoRowsOverlay: UxDataGridCustomNoRows,
      editButton: params => <ViewAndDeleteSetting {...params}  
          openAddConfigurationsWindow={openAddConfigurationsWindow}
          onDeleteSetting={onDeleteSetting} />
};
.
.
.
const onDeleteSetting = async () =>
{
  console.log("ON DELETE AND NAME IS: " + props.name ); //PRINTS AN EMPTY STRING
   ...
}

return (
  <AgGridReact
            columnDefs={columnDefinition} 
            rowData={gridRowData} 
            frameworkComponents={frameworkComponents}/>
);

正如您在onDeleteSetting 的评论中看到的，调用此回调时名称为空。单元格本身的渲染很好，ViewAndDeleteSetting 确实被渲染了，只是它似乎只被渲染一次，而不是每次名称更改时。如何使用最新的frameworkComponents 重新呈现内部ViewAndDeleteSetting 组件？

Answer 1

问题在于我如何尝试将道具传递给ViewAndDeleteSetting。如果您想将 prop 传递给单元格渲染组件，则不应在 frameworkComponents 中执行此操作，而是需要在列定义中执行此操作，如下所示：

useEffect(() =>
{
  let columns = [{headerName: '', cellRenderer: 'editButton', width: 90, editable: false, 
                  cellRendererParams: {
                    openAddConfigurationsWindow: openAddConfigurationsWindow,
                    onDeleteSetting: onDeleteSetting
                }},
                .. other columns
                ]

  setColumnDefinition(columns);
},[props.name]);

当名称更改时，cellRendererParams 的列会在 useEffect 中重新创建，然后组件可以通过其 props 定期访问此参数