4

我一直在尝试 relay-modern 一段时间，我想知道createFragmentContainer除了描述应该属于Component.

例如，这就是文档显示它应该如何的方式

父.js

<QueryRenderer
  render={({error, props}) => {
    if (error || props) {
       return <Child someData={someData}>
    }
    return <div>Loading</div>
  }}

  query={graphql`
    query SomeQuery($id: ID!) {
      endpoint(id: $id) {
        ...Child_someData
      }
    }
  `}
/>

Child.js

export default createFragmentContainer( 
  ({someData}) => <header>{someData.title} - {someData.name}</header>,
  graphql`
    fragment Child_someData on EndPoint {
       title
       name
    }
  `
)

但相反Child.js，我可以用查询重写或拆分组件到 2 个不同的文件，如下所示：

ChildComponent.js

export default ({someData}) => <header>{someData.title} - {someData.name}</header>

Child.js

export default graphql`
  fragment Child_someData on EndPoint {
    title
    name
  }
`

它仍然可以工作（Parent.js仍然会识别片段）。所以这让我想知道是否createFragmentContainer只是为了让语法糖更整洁。

如果有人能用这个照亮，那就太棒了！在有关此的文档中找不到太多内容

4

2 回答 2

0

你的例子是一个相当静态的实现......我认为你需要考虑的是这些是提供额外功能的容器，fragmentContainer是更抽象的层之一。

我会更多地看看refetchContainer和paginationContainer如何扩展fragmentContainer的概念，并看看 Github 存储库本身，

https://github.com/facebook/relay/blob/master/packages/react-relay/modern/ReactRelayFragmentContainer.js

因此，子容器当然可以只是一个包含要导出的片段的文件，但理想情况下，您应该将它们视为容器，它们是 React 组件的扩展。它们是冒泡到组合查询中的容器片段，为您在 React 上下文中管理状态提供了便利。

于 2017-07-26T01:43:28.337 回答
0

中继编译器将找到您的Child.js文件，因此将创建片段并获取您的查询。但是，不同之处createFragmentContainer在于 Relay 使用 HOC 来保证组件在所有必要数据可用之前不会渲染。这就是它的目的，FragmentContainer这就是你应该使用它的原因。

于 2017-10-18T17:36:15.343 回答