Question

任何人都可以解释我如何根据当前在组件中获取的数据在Relay容器上定义片段？考虑这个例子：

const TreeNodeContainer = Relay.createContainer(TreeNode, {
  fragments: {
    node: (variables) => Relay.QL`
      fragment on TreeNode {
        id,
        expanded,
        title,
        children(first: 1000) @include(if: $expanded) {
          edges {
            node {
              id,
              ${TreeNodeContainer.getFragment('node').if('how I can get component props or "expanded" value here?')}
            }
          }
        }
      }
    `,
  },
});

TreeNode组件非常简单 - 它具有突变，改变了服务器上的“扩展”字段。

class TreeNode extends React.Component {

  handleClick() {
    Relay.Store.update(new ExpandNodeMutation({node: this.props.node}));
  }

  render() {
    var node = this.props.node;
    var variables = this.props.relay.variables;
    return (
      <div className="node">
        <div className="title" onClick={this.handleClick.bind(this)}>  {node.title}</div>
        <div className="children" style={{paddingLeft: 20}}>
          {node.expanded && node.children && node.children.edges.map((edge)=> {
            return <TreeNodeContainer node={edge.node} key={edge.node.id}/>
          })}
        </div>
      </div>
    )
  }
}

Answer 1

使用.if(variables.expanded)：

const TreeNodeContainer = Relay.createContainer(TreeNode, {
  fragments: {
    node: variables => Relay.QL`
      fragment on TreeNode {
        # ...
        children(first: 1000) @include(if: $expanded) {
          # ...
            ${TreeNodeContainer.getFragment('node').if(variables.expanded)}

根据提取的数据定义片段

1 个答案: