如何在中继容器之间传递变量
我正在寻找良好的语法，以便将一个变量从父容器传递给子容器。
假设我有这些路径，/上有一个全局小部件列表，/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变量从父容器传递给子容器的好语法是什么？
回答 2
Stack Overflow用户
发布于 2015-09-24 20:36:11
在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。因此，首先需要将WidgetListID变量从WidgetListContainer的变量中提取出来，然后将其传递给WidgetList.getFragment()。
注意，$符号仅在Relay.QL模板字符串中使用。在变量对象中，可以按名称引用变量，而不使用$。
Stack Overflow用户
发布于 2015-09-27 10:53:40
嗨，我也为这个挣扎了一段时间。改变这一点：
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: null }，此设置将使WidgetListID变量可用于WidgetList组件的中继容器。
https://stackoverflow.com/questions/32756125
复制相似问题
腾讯云开发者
