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

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親コンテナーから子コンテナーに変数を渡すには、どの構文が適切でしょうか?

4

2 に答える 2