Jak przekazywać zmienne między kontenerami przekaźnikowymi

Question

Poszukuję dobrej składni do przekazania zmiennej z kontenera nadrzędnego do kontenera podrzędnego.

Załóżmy, że mam tezy z globalną listą widżetów na / i listami widżetów na /widgets/:WidgetListID.

Uwaga: Używam reagować-Router-przekaźnik

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

To samo <WidgetList/> komponent, świadczonych wewnątrz <WidgetListContainer/> wewnątrz <Layout/> i tutaj jest jak próbuję przekazać WidgetListID zmiennej:

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

nie mam ustawienie zmiennej WidgetListID bezpośrednio wewnątrz pojemnika przekaźnika WidgetList problem, że działa perfekcyjnie, ale jak najszybciej Próbuję przekazać go z kontenera przekaźnika WidgetListContainer Mam pusty obiekt danych {__dataID__: "VXNlcjo="}. Jednak zmienna jest dobrze wydrukowana w mojej funkcji getWidget(). Więc coś w pewnym momencie nie działa, ale nie wiem, co?

Jaka byłaby dobra składnia do przekazania zmiennej WidgetListID z kontenera nadrzędnego do kontenera podrzędnego?

Answer 1

W WidgetListContainer, zmień to:

fragments: { 
    viewer: ($WidgetListID) => Relay.QL` 
     fragment on User { 
     ${WidgetList.getFragment('viewer', $WidgetListID)} 
     } 
    `, 
    }, 

do

fragments: { 
    viewer: ({WidgetListID}) => Relay.QL` 
     fragment on User { 
     ${WidgetList.getFragment('viewer', {WidgetListID})} 
     } 
    `, 
    }, 

Pierwszym argumentem konstruktora fragmentu jest Relay variables. Najpierw należy pobrać zmienną WidgetListID ze zmiennych WidgetListContainer, a następnie przekazać ją do WidgetList.getFragment().

Należy pamiętać, że symbol $ jest używany tylko wewnątrz szablonu szablonu Relay.QL. Wewnątrz obiektu zmiennych odwołujesz się do zmiennej według nazwy, bez wartości $.

Answer 2

Witam też zmagałem się z tym przez chwilę. Zmień to:

class WidgetListContainer extends React.Component { 
    render() { 
    return (
     <div> 
     ... 
     <WidgetList 
      viewer={viewer} 
     /> 
     </div> 
    ) 
    } 
} 

do tego:

class WidgetListContainer extends React.Component { 
    render() { 
    return (
     <div> 
     ... 
     <WidgetList 
      WidgetListID={this.props.relay.variables.WidgetListID} 
      viewer={viewer} 
     /> 
     </div> 
    ) 
    } 
} 

także w pojemniku przekaźnika Twojego WidgetList komponentu nie zapomnij ustawić zmienne początkowe do initialVariables: { WidgetListID: null }, to Instalator udostępni zmienną WidgetListID dla kontenera przekaźnika komponentu WidgetList.