如何在 Relay Container 之间传递变量

Posted 2023-03-08

【中文标题】如何在 Relay Container 之间传递变量

【英文标题】：How to pass variables between Relay Containers

【发布时间】：2015-12-21 17:57:25

【问题描述】：

我正在寻找将变量从父容器传递到子容器的良好语法。

假设我有这些路线，在/ 上有一个全局小部件列表，在/widgets/:WidgetListID 上有一个特定小部件列表。

注意：我使用 react-router-relay

<Route
    path='/' component=Layout
  >
    <IndexRoute
      component=WidgetListContainer
      queries=ViewerQueries
    />
    <Route
      path='/widgets/:WidgetListID'
      component=WidgetListContainer
      queries=ViewerQueries
    />
  </Route>

这是相同的<WidgetList/> 组件，在<WidgetListContainer/> 内部呈现在<Layout/> 内部，这是我尝试传递WidgetListID 变量的方法：

Layout.js

class Layout extends React.Component 
  render() 
    return (
      <div>
       ...
        children
       ...
      </div>
    );
  

WidgetListContainer.js

class WidgetListContainer extends React.Component 
  render () 
    return (
      <div>
       ...
        <WidgetList 
          viewer=viewer
        />
      </div>
    )
  


export default Relay.createContainer(WidgetListContainer, 
  initialVariables: 
    WidgetListID: null
  ,
  fragments: 
    viewer: ($WidgetListID) => Relay.QL`
      fragment on User 
        $WidgetList.getFragment('viewer', $WidgetListID)
      
    `,
  ,
)

WidgetList.js

class WidgetList extends React.Component 
  render () 
    return (
      <div>
        <ul>
          viewer.widgets.edges.map(edge =>
            <li key=edge.node.id>edge.node.widget.name</li>
          )
        </ul>
      </div>
    )
  

export default Relay.createContainer(WidgetList, 
  initialVariables: 
    WidgetListID: null
  ,
  fragments: 
    viewer: () => Relay.QL`
      fragment on User 
         widgets(first: 10, WidgetListID:$WidgetListID)  
          edges  
            node  
              id, 
              name
             
           
         
      
    `,
  ,
)

我直接在 WidgetList 中继容器中设置 WidgetListID 变量没有问题，它工作得非常好，但是当我尝试从 WidgetListContainer 中继容器传递它时，我有一个空数据对象 __dataID__: "VXNlcjo="。不过，该变量在我的 getWidget() 函数中打印得很好。所以有些东西在某些时候不起作用，但我不知道是什么？

将WidgetListID 变量从父容器传递到子容器的好的语法是什么？

【参考方案1】：

在WidgetListContainer 中，更改：

fragments: 
    viewer: ($WidgetListID) => Relay.QL`
      fragment on User 
        $WidgetList.getFragment('viewer', $WidgetListID)
      
    `,
  ,

到

fragments: 
    viewer: (WidgetListID) => Relay.QL`
      fragment on User 
        $WidgetList.getFragment('viewer', WidgetListID)
      
    `,
  ,

片段生成器的第一个参数是中继variables。所以首先你需要将WidgetListID变量从WidgetListContainer的变量中拉出来，然后你可以将它传递给WidgetList.getFragment()。

请注意，$ 符号仅在 Relay.QL 模板字符串中使用。在变量对象中，您按名称引用变量，不带$。

【讨论】：

感谢您的回答！我想我又错过了什么，我现在有一个错误：RelayFragmentReference: Variable 'WidgetListID' is undefined in fragment 'WidgetList'.?

对不起；我在 getFragment 调用中犯了一个错误；您还需要传入route。所以，应该是WidgetList.getFragment('viewer', route, WidgetListID)。我更新了答案，所以希望这次它会起作用:)

嗯...对不起，但看起来我的回答不正确。毕竟它没有像我预期的那样工作。 :(

不，它不起作用 :( 无论如何谢谢你的帮助！我会继续努力...我会告诉你的。

只是跟进，我能想到的最好的方法是将值传递给子组件的道具，并让子组件使用该值设置变量。

【参考方案2】：

嗨，我也为此苦苦挣扎了一会儿。 改变这个：

 class WidgetListContainer extends React.Component 
  render () 
    return (
      <div>
       ...
        <WidgetList 
          viewer=viewer
        />
      </div>
    )
  
 

到这里：

class WidgetListContainer extends React.Component 
  render () 
    return (
      <div>
       ...
       <WidgetList
          WidgetListID=this.props.relay.variables.WidgetListID
          viewer=viewer
        />
      </div>
    )
  

在您的 WidgetList 组件的中继容器中，不要忘记将初始变量设置为 初始变量： 小部件列表ID：空 , 此设置将使您的 WidgetListID 变量可用于 WidgetList 组件的中继容器。

【讨论】：

哦，别忘了之前答案的变化

谢谢你的回答，我也试过了，但对我来说也是同样的问题，空数据对象__dataID__: "VXNlcjo="。也许我在其他地方有问题？我不明白，因为如果我用任何字符串初始化变量，它就可以工作。我只是在尝试传递变量时遇到了这个问题，所以我告诉自己问题存在但可能不存在？