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

Question

我有一个组件CreateOCSServiceForm它正在从其渲染方法调用其他组件ListPage。此ListPage需要一个名为 NodeList 的属性中名为 ListComponent 的组件，而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 组件必须onSelect CreateOCSServiceForm组件上定义的方法，但是我应该如何向它们公开这个onSelect方法。不想使onSelect方法全局化，因为我必须在其中使用 CreateOCSServiceForm' 状态。我无法修改 NodeList 和 ListPage 组件，它在我的代码库中的现有组件和修改它会导致破坏其他页面。我们需要在 NodeList 组件中传递 OnSelect 属性的功能。

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

Answer 1

给定约束：

1. NodeList 和 NodeTableRow 组件必须依赖于 Select 方法

2. 我无法修改节点列表和列表页面组件

我假设ListPage已经支持 onSelect 道具：

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

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

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