AG grid react framework组件cell渲染器不更新props

Question

我正在使用 AgGridReact:

构建一个 React 功能组件

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

定期访问此参数

AG grid react framework组件cell渲染器不更新props

AG grid react framwork component cell render doesn't updae props

reactjs

ag-grid

ag-grid-react