Recursion 使用中继进行递归数据获取的不同方式？哪一个更好，还有其他问题

最近，我用

继电器

为递归分类器制作了一个组件。 我用两种方法做到了。其中一个不起作用，第二个起作用。 从最终用户的角度看，它们都具有相同的功能。 简言之，该任务基本上是一个带抓取的通用递归数据抓取 在下一个层次上扩展

第一种方式：

设置继电器变量后获取数据

展开

。它是通过 递归片段组合。主要部分是：

const CategoryItemContainer = Relay.createContainer(CategoryItem, {
  initialVariables: {
    expanded: false,
  },

  fragments: {
    category: (variables) => Relay.QL`
        fragment on Category {
            id
            name
            hasChildren

            ${CategoryItemSubcategoryListContainer.getFragment('categories').if(variables.expanded)}
        }
    `,
  },
});

const CategoryItemSubcategoryListContainer = Relay.createContainer(CategoryItemSubCategoryList, {
  fragments: {
    categories: () => Relay.QL`
        fragment on Category {
            categories(first: 10000) {
                edges {
                    node {
                        ${CategoryItemContainer.getFragment('category')}
                    }
                }
            }

        }
    `,
  },
});

这样就假定只调用一次

中继.RootContainer

。信息技术 对我来说不起作用，但我知道其他人实现了它，一切都很好（很好） 另一篇文章的主题）

第二种方式：

第二种方法对我来说很简单。我不使用

中继

变量，但我调用

Relay.Renderer

，根据UI组件的 国家。像这样：

{this.state.hasOwnProperty(category.id) ? // <- changing the state triggers the recursion
  <Relay.Renderer
  Container={CategoryItemSubCategoryListContainer}
  queryConfig={new CategoryRoute({ id: category.id })}
  environment={Relay.Store}
  render={({ done, error, props, retry, stale }) => {  
    if (error) {
      return 'Error';
    } else if (props) {
      return <CategoryItemSubCategoryListContainer {...props}
                                                   maxLevel={maxLevel}
                                                   currentLevel={currentLevel + 1}
                                                   activeCats={this.props.activeCats}
                                                   elementSelectedCallback={elementSelectedCallback}/>;
    }

    return (
      <ul className="dropdown-menu" aria-labelledby="dLabel">
        <li>
          <div className="list-group-item"><p className="text-center"><img src="img/ajax-loader.gif"/></p></div>
        </li>
      </ul>
    );
  }}
  /> : ''}

因此，当我在2级捕捉到在组件内部拾取的事件时，如何 我从

中继

获取根类别的完整路径？我想我可以 使用一些

Relay

API从商店获取它们？还是我必须实施这个 储存自己

第三个

正如我在第二种实现方式中所说的，我需要一个很好的特性 每次调用

Relay.Renderer

时获取加载微调器。这怎么可能 用第一种方法做吗？我的意思是，在第一种方式中，数据获取隐藏在内部 片段合成和由

setVariables

触发。我应该吗 在

setVariables

方法之前触发微调器，然后将其关闭 在唯一的

中继.RootContainer

的

onReadyStateChange

中？但是看起来 我必须为渲染容器创建微调器状态的全局存储。。 我在这里感到困惑

[root cat id, root cat name],
[level 1 cat id, level 1 cat name],
[level 2 cat id, level 2 cat name]