4

嗨，我可以访问容器上 prepareVariables 中的道具吗？

我有一个递归结构：

LocationList = Relay.createContainer(LocationList, {
    fragments: {
        location: () => Relay.QL`
            fragment on LocationPart {
                id, children { 
                    id, hasChildren, value,
                    ${LocationListItem.getFragment('location')} 
                }
            }
        `
    }
});
LocationListItem = Relay.createContainer(LocationListItem, {
    initialVariables: {
        expanded: false
    },
    fragments: {
        location: (variables) => Relay.QL`
            fragment on LocationPart {
                id, path, value, description, hasChildren,
                ${LocationList.getFragment('location').if(variables.expanded)}
            }
        `
    }
});

在根上，我将第一级扩展为：

fragment on LocationPart {
    ${LocationListItem.getFragment('location', { expanded: true })}
}

我想保留整个状态并在以后恢复它。我已经涵盖的保留状态，我将带有状态的对象树传递给所有节点。所以我希望能够在prepareVariables中做到这一点：

prepareVariables() {
    return { expanded: this.props.open[this.location.id] };
}

我尝试使用构造函数：

constructor(props) {
    super(props);
    if (props.open[props.location.id]) 
        props.relay.setVariables({ expanded: true });
}

但随后中继抱怨提供的预期道具location将由LocationList中继获取数据。

这可能吗 ？

4

2 回答 2

4

你不能 -prepareVariables在组件渲染之前运行，并且 props 在那里不可用。相反，使用从父级传入的变量。

于 2015-12-18T17:49:51.207 回答
2

这里的挑战是展开/折叠组件的列表是每个实例的，而中继查询是静态的，并且在创建任何组件之前构建。静态查询LocationListItem每个级别包含一个，而结果将包含项目列表。这意味着查询不能代表不同expanded列表项的不同值，因为查询甚至没有多个列表项。

这是 GraphQL 和 Relay 中的一个明确的设计决策：查询是静态的，因此大多数查询可以在一次往返中执行（有关 Relay 文档的更多解释）。在诸如此类的复杂情况下，您可以：

  • 为了允许一次获取数据，您可以更改查询本身以接受展开/折叠项目的映射作为输入参数，并相应地调整返回类型。
  • 如果您对一些额外的往返行程没问题，您可以继续使用相同的查询并setVariables在componentDidMount生命周期方法中使用，根据道具设置扩展变量（就像您在 中尝试做的那样prepareVariables）。
于 2015-12-21T17:15:41.863 回答