如何在中继容器之间传递变量

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
            } 
          } 
        } 
      }
    `,
  },
})

我没有问题WidgetListID直接在WidgetList中继容器内设置变量,它工作得很好,但是当我尝试从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})}
      }
    `,
  },

片段构建器的第一个参数是 Relay variables。因此，首先您需要将WidgetListID变量从 的变量中取出WidgetListContainer，然后您可以将其传递到WidgetList.getFragment().

请注意，该$符号仅在模板字符串内使用Relay.QL。在变量对象内部，您可以通过名称引用变量，而不需要使用$.