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

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 的方法多变的:

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

小部件列表.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})}
      }
    `,
  },

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

请注意 $符号仅在 Relay.QL 内使用模板字符串。在 variables 对象内部，您按名称引用变量，没有 $ .