Come passare le variabili tra i contenitori di inoltro

Question

Sto cercando la buona sintassi per passare una variabile da un contenitore padre a un contenitore figlio.

Supponiamo di avere percorsi di questo tipo, con un elenco di widget globale su / e elenchi di widget specifici su /widgets/:WidgetListID.

Note: Uso reagire-router-relè

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

E 'lo stesso <WidgetList/> componente, resi all'interno <WidgetListContainer/> all'interno <Layout/> ed ecco come provo a passare la variabile 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 
      } 
      } 
     } 
     } 
    `, 
    }, 
}) 

ho impostando la variabile WidgetListID direttamente all'interno del contenitore relè widgetList problema, funziona perfettamente soddisfacente, ma non appena Provo a passarlo dal contenitore relay di WidgetListContainer. Ho un oggetto dati vuoto {__dataID__: "VXNlcjo="}. Però, la variabile è ben stampata nella mia funzione getWidget(). Quindi qualcosa non funziona a un certo punto, ma non riesco a capire cosa?

Quale sarebbe la buona sintassi per passare la variabile WidgetListID dal contenitore padre al contenitore figlio?

Answer 1

Nel WidgetListContainer, cambiare questo:

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

a

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

Il primo argomento al costruttore frammento è il relè variables. Quindi, per prima cosa è necessario estrarre la variabile WidgetListID dalle variabili di WidgetListContainer e quindi passarla a WidgetList.getFragment().

Si noti che il simbolo $ viene utilizzato solo all'interno della stringa modello Relay.QL. All'interno dell'oggetto delle variabili, si fa riferimento alla variabile in base al nome, senza lo $.

Answer 2

Ciao, ho anche faticato con questo per un po '. Modificare questa:

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

a questo:

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

anche nel container staffetta del componente widgetList non dimenticate di impostare le variabili iniziali per initialVariables: { WidgetListID: nullo }, questo l'installazione renderà disponibile la variabile WidgetListID per il contenitore relay del componente WidgetList.