如何在ReactJS中从父组件的嵌套组件访问父组件方法

Question

我有一个组件CreateOCSServiceForm，它从它的render方法调用另一个组件ListPage。此ListPage从其名为ListComponent的属性中期待一个名为NodeList的组件，并且NodeList再次从其名为Row的属性中期待一个组件NodeTableRow，如下所示-

 //Getting called from NodeList's attribute
const NodeTableRow: React.FC<NodeTableRowProps> = ({ obj: node, index, key, style, customData }) => {
return (
<TableRow index={index} trKey={key} style={style}>
  <td data-key="0" className="pf-c-table__check" role="gridcell">
    <input type="checkbox" checked={false}
      onChange={(e) => { onSelect(e, e.target.checked, index, node) }}
    />
  </td>
  <TableData>
    ---
  </TableData>
  <TableData>
   ---
  </TableData>
  <TableData>
     ----
  </TableData>
  <TableData>
    ----
  </TableData>
</TableRow>
 );
};

//Getting called from ListPage's attribute
const NodesList = props => <Table customData={props.data} {...props} Row={NodeTableRow} onSelect={onSelect} />;


//main component which is calling ListPage 
export const CreateOCSServiceForm: React.FC<CreateOCSServiceFormProps> = (props1) => {
 const title = 'Create New OCS Service';
 const [error, setError] = React.useState('');
 const [inProgress, setProgress] = React.useState(false);

 const [rowData, setRowData] = React.useState(null);

 const onSelect = (event, isSelected, virtualRowIndex, rowData1) => {
    console.log(rowData1, 'customData');
    console.log('isSelected', isSelected, 'virtualRowIndex', virtualRowIndex, 'rowData', rowData1);
    rowData[virtualRowIndex].selected = true;
    setRowData(rowData);
 };
return (
   <ListPage kind={NodeModel.kind} showTitle={false} ListComponent={NodeList} />}
   )
}

问题是NodeList和NodeTableRow组件必须访问在CreateOCSServiceForm组件上定义的onSelect方法，但是我应该如何向它们公开这个onSelect方法呢？我不想让onSelect方法成为全局方法，因为我必须在其中使用CreateOCSServiceForm`状态。我不能修改NodeList和ListPage组件，它的现有组件在我的代码库中，修改它会导致破坏其他页面。我们需要在NodeList组件中传递OnSelect属性的功能。

任何指导都将不胜感激。提前感谢

Answer 1

给定约束条件：

1. NodeList和NodeTableRow组件必须访问onSelect method

1. 我无法修改NodeList和ListPage component

我假设ListPage已经支持onSelect属性：

return (
  <ListPage onSelect={onSelect} kind={NodeModel.kind} showTitle={false} ListComponent={NodeList} />
)

或者其他传递方法的方式(但您需要查看文档)，例如：

return (
  <ListPage options={{ListComponentOnSelect: onSelect}} ... />
)