Question

我已经尝试过一段时间的现代接力，我想知道createFragmentContainer的目的是什么，而不只是为了描述片段< em>应 be Component。

e.g。这就是文档如何显示它应该是什么

Parent.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是否只是为了使语法更加简洁。

如果有人能用这个灯光照亮，那就太棒了！无法在documentation中找到关于此

的内容

Answer 1

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

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

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

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

Answer 2

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

接力createFragmentContainer的现代目的

2 个答案: