Question

最近我用Relay为递归分类器创建了一个组件。我用两种方式做到了。其中一个不起作用，第二个起作用。从最终用户方面来看，它们看起来都具有相同的功能。简而言之，任务几乎是通过提取获取的一般递归数据在下一级扩展。

第一种方式：

设置中继变量expand后获取数据。它是通过递归片段组成。主要部分是：

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')}
                    }
                }
            }

        }
    `,
  },
});

这种方式假设Relay.RootContainer只被调用一次。它不适合我，但我知道其他人实现了它，一切都很好（它是另一篇文章的主题。）

第二种方式：

第二种方式对我很轻松。我不使用Relay变量，但我打电话 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>
    );
  }}
  /> : ''}

这就像我预期的那样有效。此外，我有一个很好的装载机图标每次下一级。

所以，有了这个我有三个问题：

第一个

这些方法中的任何一种都是首选方法吗？也许有缺点在某个我不知道的地方？自从我介绍以来，我想理解这一点 Relay我的公司，我愿意替换所有传统的前端 React和Relay。

第二个

在某个时间点，用户将从此递归中选择一个类别分类器，我将得到导致当前的数据的完整路径水平。我的意思是如果用户在层次结构的第3级选择一个类别，我必须给出支持这些数据：

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

因此，当我在2级抓住组件内部的事件时，怎么可能我从Relay的根类别中获取完整路径？我以为我可以使用一些Relay API从商店获取它们？或者我必须实现这一点存放自己？

第三次

正如我在第二种实施方式中所说，我有一个很好的功能每次调用Relay.Renderer时都获取加载微调器。怎么会这样以第一种方式完成？我的意思是第一种方式是将数据提取隐藏在内部片段组成和由setVariables触发。我是不是该在setVariables方法之前触发微调器，然后将其关闭只在onReadyStateChange的{{1}}？但似乎就是这样就像我必须为渲染容器制作一个旋转器状态的全局存储器.. 我在这里很困惑..

使用Relay获取递归数据的不同方法？哪一个更好，还有其他问题

0 个答案: