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，只是它似乎只渲染一次，而不是每次更改名称时。如何使用最新的 ViewAndDeleteSetting 重新呈现内部 frameworkComponents 组件？

Answer 1

问题在于我如何尝试将 props 传递给 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 网格反应框架组件单元渲染不会更新道具

1 个答案: