React 钩子：将网格的对象传递给父组件

Question

我有一个父组件调用公共网格组件(子)。网格组件的结构在子组件中定义。父组件只把数据发送给子组件。

<Grid tableData={gridData} columnData={activeColumnDef} onselectedRows={isDisabledOnMultipleRowSelect}/>}

子组件:

const Grid = ({ tableData, columnData, ...props}) => {
const [gridApi, setGridApi] = useState(null);

const onGridReady = params => {
setGridApi(params.api);
setGridColumnApi(params.columnApi);
}
const refreshEntireGrid = () => {
gridApi.setRowData(gridrowData);
gridApi.refreshCells({force:true});
}
const getSelectedRowData = (event) => {
props.onselectedRows(event.api.getSelectedRows().length);
}
<div className="ag-theme-alpine-dark">
<AgGridReact
onGridReady={onGridReady}
defaultColDef={{
initialWidth: 270,
sortable: true,
filter: true,
resizable: true,
sizeColumnsToFit: true
}}
ref={gridRef}
applyColumnDefOrder={true}
headerCheckboxSelection={true}
suppressPaginationPanel={true}
columnDefs={gridcolumns}
rowData={gridrowData}
pagination={true}
paginationAutoPageSize={true}
rowSelection="multiple"
onSelect={(event) => getSelectedRowData(event)}
onSelectionChanged={getSelectedRowData}>
</AgGridReact>
</div>

父组件本身有一组按钮。其中一个按钮是RemoveButton，它从网格中删除选定的行，而refreshButton则刷新网格。为了捕获选定的行和gridApi状态，我定义了各种函数。

我想实现两件事——

1. 将refreshEntireGrid函数传递给父组件，以便当我单击父组件中的按钮时触发该函数。
或者找到一种方法来传递gridApi状态到父对象，这样我就可以在多个地方使用它。而不是传递多个方法从父对象作为道具，它会更干净，如果我可以传递gridApi父和使用在任何onClick方法(在父组件)有需要它。

有没有更好的解决方案，而不是我正在考虑的两个?请帮忙?

Answer 1

解决方案有点棘手。但如果你理解下面的步骤，就很容易了:

• 在父组件中创建一个接收数据的回调
• 将这个回调作为道具传递给子进程组件。
• 使用回调从子组件发送数据。

ParentComponent

function ParentComponent(props) {
let [gridValueFromChild, setGridValueFromChild] = useState(null);
let callback = valueFromChild => setGridValueFromChild(valueFromChild);
return (
<div>
<ChildComponent callbackFunc={callback} someValue={value} />
</div>
);
}

ChildComponent

function ChildComponent(props) {
const [gridApi, setGridApi] = useState(null);

const refreshEntireGrid = () => {
gridApi.setRowData(gridrowData);
gridApi.refreshCells({force:true});
// Send gridApi value to Parent
props.callbackFunc(gridApi)
}
// Incase you want to send data to parent at ComponentDidMount itself
useEffect(() => {
props.callbackFunc(gridApi)
}, [])
return (
<div>
...
</div>
);
}

如果你想传递gridApi的值在开始本身或任何状态变化，你可以使用UseEffect钩子和调用callbackFunc那里