如何将道具传递到地图元素（jsx）

Question

我正在传递一个jsx数组作为prop（FruitTable中的列prop），像这样：

import {FruitTable} from './FruitTable'

...

return(
 <FruitTable
  column={{render:(data)=>[
   <div>data.fruit1</<div>,
   <div>data.fruit2</div>]}}>
  ]}}
  data={{fruit1:'apple', fruit2:'orange'}}
 />
)

在FruitTable组件中，我有：

const handleClick = () => alert('You clicking a fruit')

export const FruitTable = (props) =>
<tbody> 
 <tr>
  {props.column.render(props.data).map((fruit,idx)=>
   <td key={idx}>{fruit}</td>
  )}
 </tr>
</tbody>

因此，我试图生成一个表，其中表行中包含一行，内部有两个单元格。

但是我想将handleClick函数作为onClick道具传递给地图内的{fruit}。

我该如何实现？

我尝试了cloneElement（），将水果引用到新的常量...失败。