リレーコンテナ間で変数を渡す方法

Question

親コンテナから子コンテナに変数を渡すための良い構文を探しています。

グローバルルートのウィジェットリストが/であり、特定のウィジェットリストが/widgets/:WidgetListIDであるとします。

注：私は

<Route 
    path='/' component={Layout} 
    > 
    <IndexRoute 
     component={WidgetListContainer} 
     queries={ViewerQueries} 
    /> 
    <Route 
     path='/widgets/:WidgetListID' 
     component={WidgetListContainer} 
     queries={ViewerQueries} 
    /> 
    </Route> 

反応-ルータリレーを使用することが<Layout/>内<WidgetListContainer/>内にレンダリング同じ<WidgetList/>コンポーネント、だとここで私は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変数を設定する問題はありません、それはできるだけ早く完全に正常に動作しますが、私は空のデータオブジェクト{__dataID__: "VXNlcjo="}を持っているWidgetListContainerリレーコンテナから渡そうとします。しかし、変数は私のgetWidget（）関数でうまく表示されます。だから、何かがうまくいかないのですが、何が分かりませんか？

WidgetListID変数を親コンテナから子コンテナに渡すには、どのような構文が良いでしょうか？ WidgetListContainerで

Answer 1

、これを変更：断片ビルダーに

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テンプレート文字列内でのみ使用されます。変数オブジェクトの内部では、$を付けずに変数を名前で参照します。

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：ヌル }、 このWidgetListコンポーネントのリレーコンテナでWidgetListID変数を使用できるようになります。