使用 Relay 和 React-Native 时的条件片段或嵌入的根容器

Posted 2023-03-08

【中文标题】使用 Relay 和 React-Native 时的条件片段或嵌入的根容器

【英文标题】：Conditional fragments or embedded root-containers when using Relay with React-Native

【发布时间】：2015-12-11 04:53:57

【问题描述】：

我让relay 与react-native 一起工作，但我对如何最好地利用中继路由和根容器感到困惑，尤其是在使用呈现多条路由的Navigator 时。

参加以下课程：

var Nav = React.createClass(

 renderScene(route, nav) 
   switch(route.id) 
     case 'first':
       return <First navigator=nav />
     case 'second':
       return <Second navigator=nav />
   
 ,

 render() 
   <Navigator
     initialRoute= id: 'first' 
     renderScene=this.renderScene
   />
 

)


module.exports = Relay.createContainer(Nav,    
  fragments: 
    viewer: () => Relay.QL`
      fragment on User 
        $First.getFragment('viewer',
        $Second.getFragment('viewer'
      
    `   
   
)

在我的父路由中，然后我请求构建查询的 User 片段。

问题是片段将包含由first 和second 组件定义的那些字段，即使一次只显示其中一个。

在这种情况下，我应该：

1) 在renderScene 回调中返回另一个Relay.RootContainer？将Relay.RootContainers 相互嵌入通常是一个坏主意吗？

renderScene(route, nav) 
  switch(route.id) 
    case 'first':
      return (
        <Relay.RootContainer
           Component=First
           route=new FirstRoute()
           renderFetched=(data) => 
             return <First navigator=nav ...data />
           
        />
      )
  

2) 使用条件变量来包含片段？

initialVariables: 
  first: true
,

fragments: 
  viewer: (variables) => Relay.QL`
    fragment on User 
      $First.getFragment('viewer').if(variables.first)
    
  `

或者有其他建议吗？

【参考方案1】：

使用这样的东西：¹

function matchRoute(route, map) 
  return map[route.name] ? map[route.name]() : null;

试试这个：

fragments: 
  viewer: (variables) => Relay.QL`
    fragment on User 
      $route => matchRoute(route, 
        FirstRoute: () => First.getFragment('viewer'),
        SecondRoute: () => Second.getFragment('viewer'),
      ,
    
  `,

[1]：medium.com/@cpojer/relay-and-routing

【讨论】：

变量route从何而来？

github.com/facebook/relay/blob/…