代码之家  ›  专栏  ›  技术社区  ›  user3808307

为graphQL查询添加包装器-HOC或Render props

  •  0
  • user3808307  · 技术社区  · 5 年前

    const GQLWrapper = ({ query, children}) => (
      <Query query={query}>
        {({ loading, error, data }) => {
          if (loading) {
            return null
          }
          if (error) {
            <QueryError />
          }
          const { gqlData } = data.page    
          return (
            <div>
              {children}
            </div>
          )
        }}
      </Query>
    )
    

    但我不懂怎么用 render props 将数据传递给子组件。

    另外,如果使用HOC是一个更好的解决方案,请让我知道(什么时候应该使用其中一个或另一个)。谢谢你

    1 回复  |  直到 5 年前
        1
  •  1
  •   Moinul Hossain    5 年前

    你只需要让你的孩子成为一个函数,然后把数据传递到那里

    return <div>{children(gqlData)}</div>;
    

    当你使用你的包装时:

    <GQLWrapper query={myquery}>
      {(gqlData) => <SomeComponent data={gqlData} />}
    </GQLWrapper>