谁能解释我如何根据当前在组件中获取的数据在 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>
)
}
}