Question

我有一个树形结构，我试图查询特定的深度。我是新来的转发，所以不确定我是否以正确的方式解决这个问题，或者即使它是可能的。

我的代码目前看起来像这样：

class TreeRoot extends React.Component {
  render() {
    var container = this.props.treeRoot;
    return (
      <div>
        <ViewNode viewNode={container.root} maxDepth={10} expand={true}/>
      </div>
    );
  }
} 

class ViewNode extends React.Component {

   render() {
      var vn = this.props.viewNode;
      return (
       <div>
        <div>{vn.type} {vn.widget} {vn.mode}</div>
         <ViewNodeList viewNode={vn} maxDepth={this.props.maxDepth-1}/>
       </div>
      );
  }
}

ViewNode = Relay.createContainer(ViewNode, {
    initialVariables:{
        maxDepth:1,
        expand:false
    },
    fragments: {
      viewNode: (variables) => Relay.QL`
        fragment on ViewNode{
          id
          type
          widget
          mode
          viewNodes @include(if: $expand){
            ${ViewNode.getFragment("viewNode", {maxDepth:(variables.maxDepth -1),expand:(variables.maxDepth > 0)}).if(variables.expand)}
        }
    }`,
  }
});

class ViewNodeList extends React.Component {
  render() {
    const vn = this.props.viewNode;
    if (!vn.viewNodes){
      return (<div></div>);
    }
    return (
      <div>
        {vn.viewNodes.map((el, i)=> {
          return <ViewNode key={i} viewNode={el} maxDepth={this.props.maxDepth} expand={this.props.maxDepth > 0}></ViewNode>
        })
        }
      </div>
    );
  };
}

TreeRoot = Relay.createContainer(TreeRoot, {
    fragments: {
      root: () => Relay.QL`
          fragment on TreeRoot{
              id
              name
              root{
                  ${ViewNode.getFragment('viewNode',{maxDepth:10,expand:true})}
              }
           }
       `,
    }
  }
);

重要的是我试图控制ViewNode组件的viewNode片段中的递归。它试图在减少“最大深度”时递减。变量并使用＆＃39; maxDepth＆＃39;计算＆＃39;扩展＆＃39;的价值变量。是否继续递归是基于＆＃39;扩展＆＃39;变种

目前，这会检索根和第一级别的子级，但不会根据需要进行递归。我试图做的是什么？如果我是在正确的轨道上或以完全错误的方式解决这个问题？

Answer 1

典型的模式是为内容创建片段，然后将元素嵌套在查询中。 E.g。

fragment ViewContent on ViewNode {
  name
}

query ViewQuery {
  root {
    viewNode {
      ...ViewContent
      viewNode {
        ...ViewContent
        viewNode {
           ...ViewContent
        }
      }
    }
  }
}

递归查询到特定深度

1 个答案: