如何将子组件的值暴露到父组件中?

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› React

这是一个创建于 1632 天前的主题，其中的信息可能已经有所发展或是发生改变。

代码如下：

<AssetList
      loading={loading}
      pagination={{ ...page, total }}
      data={data}
      infiniteScroll={infiniteScroll}
      hasMore={hasMore}
      onLoadmore={onLoadMore}
      handle={
        <HandleBox onClick={(e) => e.stopPropagation()}>
          <HandleItem onClick={handleEdit}>编辑</HandleItem>
          <HandleItem onClick={handleTogglePublish}>
            {item.isPublish === 'yes' ? '取消发布' : '发布'}
          </HandleItem>
          <HandleItem onClick={handleDel}>删除</HandleItem>
        </HandleBox>
      }
    />

我描述一下需求，AssetList 是一个列表组件，多个页面会用到，但是每个页面中对 AssetList 的操作是不同的，我想到的是将 handle 当一个属性传进去，现在的问题是不知道如何取到item(操作的项)的值

我以前写 vue 的，这个操作类似于 vue 中的作用域插槽，请问 react 有没有办法实现这种机制？

2 条回复 • 2020-05-27 16:47:23 +08:00

BingoXuan

2020-05-27 16:33:59 +08:00

props.children 就类似 vue 的 slot 。assetlist 需要一个接收处理函数的函数，把获取的 props.children 传给对应处理函数。

justyeh

2020-05-27 16:47:23 +08:00

嗯，自己解决了，一开始没有搜索对方向，帖子一发就找到办法了

还是谢谢楼上

```
const Handle = useCallback((rowData) => {
return (
<HandleBox onClick={(e) => e.stopPropagation()}>
<HandleItem onClick={() => handleEdit(rowData)}>编辑</HandleItem>
<HandleItem onClick={() => handleTogglePublish(rowData)}>
{rowData.isPublish === 'yes' ? '取消发布' : '发布'}
</HandleItem>
<HandleItem onClick={() => handleDel(rowData)}>删除</HandleItem>
</HandleBox>
)
}, [])

return (
<AssetList
loading={loading}
pagination={{ ...page, total }}
data={data}
infiniteScroll={infiniteScroll}
hasMore={hasMore}
onLoadmore={onLoadMore}
handle={Handle}
onItemDel={onItemDel}
/>
)
```

**AssetList**

```
const List = (
<div className={`asset-list ${layout} ${empty ? 'empty' : ''}`}>
{empty && !loading && <p className="empty-tip">暂无数据</p>}
{assetList.map((item) => (
<div key={item.id} className={`asset-item ${item.thumbnailType}`} onClick={() => onItemClick(item)}>
<div className="thumbnail">
<img
src={item.thumbnailType === 'image' ? item.thumbnail : AssetThumbnail[layout][item.thumbnailType]}
alt=""
/>
</div>
<div className="info">
<div className="name">{item.name}</div>
<div className="author">
{item.user?.dept?.name} {item.user.empName}
</div>
</div>
{handle && handle(item)}
</div>
))}
</div>
)
```