Question

我有一个组件CreateOCSServiceForm，它正在从其render方法调用另一个组件ListPage。该ListPage期望其名为NodeList的属性中有一个名为ListComponent的组件，而NodeList期望它的名为{{1}的属性中的一个组件NodeTableRow }这样-

Row

问题是NodeList和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} />} ) }组件上定义的onSelect方法，但是我应该如何向他们公开此CreateOCSServiceForm方法。不想使onSelect方法成为全局方法，因为我必须在其中使用CreateOCSServiceForm`状态。我无法修改NodeList和ListPage组件，它在我的代码库中现有的组件，对其进行修改将导致破坏其他页面。我们需要在NodeList组件中传递OnSelect属性的功能。

任何指导将不胜感激。预先感谢

Answer 1

给出约束：

NodeList和NodeTableRow组件必须使用onSelect方法
我无法修改NodeList和ListPage组件

我认为ListPage已经支持onSelect道具：

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

或通过其他方法传递方法（但您需要查看文档），例如：

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

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

1 个答案: