向下传递函数但保留 Parent 的道具

Question

我有 2 个组件。 parent 是一个映射列表。在每个地图渲染中，都有一个下拉菜单。下拉菜单组件有一个处理程序 prop，您可以将函数传递给该处理程序，它会将您单击的项目的数据发回给您。请参阅下面的简化代码。



const ParantList = () => {
  const listData = [1,2,3]
  const handleClick = (x, i) => {
     // Here x will return data from the child
     // i returns nothing but I would like it to be the current index of listData
     return [x, i]
  }

  return (
    <div>
       {listData.map((x, i) => <Child handleClick={handleClick} /> )}
    </div>
  )
}

const Child = ({handleClick}) => {
  const differentList = [4,5,6]

  return (
    <Dropdown>
      {differentList.map(x => 
        <Dropdown.Item onClick={()=>handleClick(x)}>
           {x} 
        </Dropdown.Item>
    )}
    </Dropdown>)
}

问题出在 parent 中的 handle click 函数中，我需要将 child 中 differentList 中的数据传递给该函数，它工作正常。但是，我还需要在 parent 地图中单击 drop-down 的相应项目 (listData) 的索引或数据。因此 handleClick 函数需要来自两个列表的数据。

简单的解决方案是将 listData 列表的当前索引传递给 child。但是，实际上，child 组件是一个我不能（或不知道如何）更改函数处理程序的包。有没有一种简单的方法可以将函数传递给 child 但同时传递道具？谢谢！

Answer 1

只需将 listData 的索引传递给 handleClick。

{listData.map((x, i) => <Child handleClick={(childX) => handleClick(childX, i)} /> )}

向下传递函数但保留 Parent 的道具

Pass A Function Down But Retain A Prop From Parent

javascript

reactjs

react-hooks