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中继容器传递它时，我有一个空的数据对象{{1 }}。虽然，变量在我的getWidget（）函数中打印得很好。所以某些事情在某些方面没有起作用，但我无法弄清楚是什么？

将{__dataID__: "VXNlcjo="}变量从父容器传递到子容器的好语法是什么？

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模板字符串中使用。在变量对象内部，您可以按名称引用变量，而不是$。

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

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

2 个答案: