AG 网格反应框架组件单元渲染不会更新道具 [英] AG grid react framwork component cell render doesn't updae props

问题描述

我正在构建一个带有 AgGridReact 的 React 功能组件:

I am building a react functional component with an 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 组件?

As you can see in the comment in onDeleteSetting, the name is empty when this callback is invoked. The rendering of the cell itself is fine and ViewAndDeleteSetting is indeed rendered, just it seems like it is being rendered only once and not every time the name changes. How can I cause the inner ViewAndDeleteSetting component to be re rendered with the most recent frameworkComponents?

推荐答案

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

The problem was with how I tried passing props to ViewAndDeleteSetting. If you want to pass prop to a cell rendered component, you shouldn't be doing it in frameworkComponents, but rather you need to do it in the column definition like this:

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

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

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

The columns with the cellRendererParams do gets recreated in the useEffect when the name changes, and then the component can access this params regularly via its props

这篇关于AG 网格反应框架组件单元渲染不会更新道具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！