Блог

Я создаю функциональный компонент react с помощью AgGridReact :

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

useEffect(async () =>
    {
      if(props.name amp;amp; 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 ?

Проблема заключалась в том, как я пытался передать реквизит 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 do воссоздаются useEffect при изменении имени, а затем компонент может регулярно обращаться к этим параметрам через свои реквизиты