反应和阿波罗：元素不返回答案

【问题标题】：react & apollo: element not returning反应和阿波罗：元素不返回
【发布时间】：2018-11-27 10:21:48
【问题描述】：

由于某种原因，使用时：

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 开发工具，h1-tag 甚至不是一个元素。通常在我的构建中，gql 查询不会干扰组件的其余部分。我可以在这段代码中看到的唯一区别是 gql 查询中添加的变量和 graphql 的导出语句中的变量选项。似乎无缘无故，不加载h1-tag，为什么要这样做？我该如何解决？

【问题讨论】：

Container标签的渲染函数是什么？看起来它的渲染中可能没有 this.props.children？
Container 标签只是一个 styled.div，不存在渲染函数...
啊，我发现了你的错误。

标签： reactjs react-router graphql apollo

【解决方案1】：

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

应该是graphql(...)(ExpandedCard)

graphql 是一个 HoC（高阶组件）。它可以被认为是一个以一个组件为输入并返回一个增强组件的组件。 HoC 用于跨组件共享横切关注点。

所以graphql看起来如下

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

包装的组件是您要使用 graphql 功能增强的组件。

【讨论】：