如何通過繼電器容器之間的變量

我正在尋找一個良好的語法來從父容器傳遞一個變量到一個子容器。如何通過繼電器容器之間的變量

比方說，我有這些路線，在/上有一個全局窗口小部件列表，在/widgets/:WidgetListID上有一個特定的窗口小部件列表。

注：我用的反應路由器中繼

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

我沒有問題，直接設置WidgetListID變量的widgetList繼電器容器內，它只要工作完全正常，但我嘗試從WidgetListContainer中繼容器傳遞它，我有一個空的數據對象{__dataID__: "VXNlcjo="}。雖然，這個變量在我的getWidget（）函數中打印得很好。所以有些事情在某些時候不起作用，但我無法弄清楚什麼？

將父容器的WidgetListID變量傳遞給子容器的良好語法是什麼？

來源

2015-09-24 Victorien

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

的第一個參數的片段構建器是中繼variables。所以首先你需要從WidgetListContainer的變量中取出WidgetListID變量，然後你可以將它傳遞給WidgetList.getFragment()。

請注意，$符號僅用於Relay.QL模板字符串中。在變量對象內部，您可以按名稱引用變量，而不需要使用$。

來源

2015-09-24 20:36:11 sefnap

謝謝你的回答！我想我又錯過了一些東西，現在我有一個錯誤：''WidgetList'中的'RelayFragmentReference：Variable'WidgetListID'未定義。 – Victorien

對不起，我在getFragment調用中犯了一個錯誤;你還需要傳遞'route'。所以，它應該是'WidgetList.getFragment（'viewer'，route，{WidgetListID}）'。我更新了答案，所以希望這次能夠運行:) – sefnap

嗯......我很抱歉，但看起來我的回答不正確。畢竟，它沒有像我期望的那樣工作。 :( – sefnap

嗨，我也爲此付出了一點努力。更改此：

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

這件事：你的widgetList組件的繼電器容器

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

也不要忘了最初的變量設置爲 initialVariables：{ WidgetListID：空 }，這安裝程序將使您的WidgetListID變量可用於您的WidgetList組件的中繼容器。

來源

2015-09-27 10:53:40

哦，不要忘記以前的答案 –

謝謝你的回答，我也試過，但這是相同的公關對我來說，空的數據對象'{__dataID__：「VXNlcjo =」}'。也許我在其他地方有問題？我不明白，因爲如果我初始化變量與任何字符串它的作品。我只有這個問題試圖通過變量，所以我告訴自己，問題在那裏，但也許不是？ – Victorien

如何通過繼電器容器之間的變量

回答

相關問題