5

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

假设我有这些路线，其中有一个全局小部件列表/和特定的小部件列表/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
            } 
          } 
        } 
      }
    `,
  },
})

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

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

4

2 回答 2

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

于 2015-09-24T20:36:11.940 回答
0

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

 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 组件的中继容器中，不要忘记将初始变量设置为 initialVariables: { WidgetListID: null }，此设置将使您的 WidgetListID 变量可用于您的 WidgetList 组件的中继容器。

于 2015-09-27T10:53:40.990 回答