最简单的方法可能是转换/缩放相同的列表项：

React部分很简单，我会在点击时计算屏幕尺寸，并将列表项转换为全屏尺寸。

数据怎么样？继电器有可能是这样的吗？我可以在列表查询中获取单个项目的更多数据，还是可以在同一个组件中使用节点查询， a'la 每个组件使用两个查询？

// Simple list query example

export default Relay.createContainer(PostList, {
    initialVariables: {
        count: 10
    },
    fragments: {
        viewer: () => Relay.QL`
            fragment on Viewer {
                posts(first: $count) {
                    edges {
                        node {
                            id
                            title
                        }
                    }
                }
            }`
    }
})

// What if I needed to fetch "content" for a single item as well?

Answer 1

是的，您可以为每个组件获取多个片段。我的建议是为所选帖子添加一个单独的片段，并在专用于帖子详细信息（永久链接）视图的路径中使用它。

首先，添加一个片段来表示所选帖子。

export default Relay.createContainer(PostList, {
  initialVariables: {
    count: 10,
  },
  fragments: {
    selectedPost: () => Relay.QL`
      fragment on Post {
        id
        title
        description
      }
    `,
    viewer: () => Relay.QL`
      fragment on Viewer {
        posts(first: $count) {
          edges {
            node {
              id
              title
            }
          }
        }
      }
    `,
  },
});

然后创建两条路线。一个只代表索引视图的查询，一个代表永久链接视图的查询。

class IndexRoute extends Relay.Route {
  static queries = {
    viewer: () => Relay.QL`query { viewer }`,
  };
  static routeName = 'IndexRoute';
}

class PostPermalinkRoute extends Relay.Route {
  static queries = {
    selectedPost: () => Relay.QL`query { node(id: $postID) }`,
    viewer: () => Relay.QL`query { viewer }`,
  };
  static paramDefinitions = {
    // By setting `required` to true, `PostPermalinkRoute` 
    // will throw if a `postID` is not supplied when instantiated.
    postID: {required: true},
  };
  static routeName = 'PostPermalinkRoute';
}

现在，当您想要在索引和固定链接视图之间切换时，需要编写一些用新路由重新呈现应用程序的代码。默认情况下，Relay将继续渲染旧路由，同时加载下一个路由的数据，因此您应该能够在等待数据时执行转换。

function render(route) {
  ReactDOM.render(
    <Relay.RootContainer
      Component={PostList}
      route={route}
    />,
    container,
  );
}

// When it's time to render the index...
render(new IndexRoute());

// Upon selecting a post...
render(new PostPermalinkRoute({postID: 123}));

您可以this.props.relay.route使用当前路线，因此您应该可以使用this.props.relay.route.name和this.props.relay.route.params来了解您应该处于什么状态。

获取列表查询

最简单的方法可能是转换/缩放相同的列表项：

1 个答案: