如何在 Relay Container 之间传递变量

Question

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

假设我有这些路线，在/ 上有一个全局小部件列表，在/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 变量从父容器传递到子容器的好的语法是什么？

Answer 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 模板字符串中使用。在变量对象中，您按名称引用变量，不带$。

Answer 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 组件的中继容器。