V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
justyeh
V2EX  ›  React

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

  •  1
     
  •   justyeh · 2020-05-27 16:27:39 +08:00 · 1573 次点击
    这是一个创建于 1401 天前的主题,其中的信息可能已经有所发展或是发生改变。

    代码如下:

    <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
        1
    BingoXuan  
       2020-05-27 16:33:59 +08:00
    props.children 就类似 vue 的 slot 。assetlist 需要一个接收处理函数的函数,把获取的 props.children 传给对应处理函数。
    justyeh
        2
    justyeh  
    OP
       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>
    )
    ```
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   964 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 20:43 · PVG 04:43 · LAX 13:43 · JFK 16:43
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.