Question

出于某种原因，使用时：

export const allBilderLinkses = gql`
query bild($name: String!){
  allBilderLinkses(filter: {collectionName: {collectionName: $name}}) {
    bildLink
  }
}
`

const Images = ({ data: { loading, error, allBilderLinkses } }) => {
  if (error) return <h1>Error fetching the post!</h1>;
  if (!loading) {
    return (
      <div>

        {allBilderLinkses.map(bild => (
          <ImageContainer bg={bild.bildLink}/>
        ))}
      </div>
    );
  }
  return <h2>Loading post...</h2>;
};


class ExpandedCard extends Component {
  render() {
    return (<div>
      <Container>
        <h1>test</h1>
      </Container>
      <Images />
    </div>
    );
  }
}

export default graphql(allBilderLinkses, {
  options:({match}) => ({ variables: {
     name: match.params.id
   },
  notifyOnNetworkStatusChange: true,
}),
}) (Images, ExpandedCard);

仅呈现<Images />。 <h1>test</h1>没有渲染，事实上通过chrome dev工具，h1-tag甚至不是一个元素。通常在我的构建中，gql查询不会干扰组件的其余部分。我在这段代码中可以看到的唯一区别是gql查询中添加的变量和graphql的export语句中的变量选项。似乎没有理由，不加载h1-tag，为什么这样做呢？我该如何解决？

Answer 1

您需要在graphql HoC调用中删除第二个参数。

应为graphql(...)(ExpandedCard)

graphql是HoC（高阶分量）。可以将其视为将组件作为输入并返回增强组件的组件。 HoC用于在组件之间共享交叉关注点。

所以graphql如下所示

const graphql = (wrappedComponent, someData) => () => <WrappedComponent {...graphql props based on someData} />

包装的组件是要通过graphql功能增强的组件。

反应与反应apollo：元素没有返回

1 个答案: