Question

我不能为我的生活弄清楚这一点。我有一个父组件，可以获得一个＆＃39;布局＆＃39;数据库中的字段。该值确定应呈现哪个子组件。父组件还需要从子组件获取GraphQL片段。父组件如下所示：

 class Page extends React.Component{

  _setLayout(){
    const Layout = this.props.viewer.post.layout.meta_value || 'DefaultLayout';
    const isDefault = Layout === 'DefaultLayout';
    const isPostList = Layout === 'PostList';

    this.props.relay.setVariables({
      page: this.props.page,
      isDefault: isDefault,
      isPostList: isPostList
    })
  }

  componentWillMount(){
    this._setLayout()
  }

  render(){
    const { viewer, className } = this.props;
    const { post } = viewer;
    const Layout = Layouts[post.layout.meta_value] || Layouts['Default'];

    return <Layout.Component viewer={viewer} page={this.props.page} condition={true} layout={Layout}/>
  }
}

export default Relay.createContainer(Page, {

  initialVariables: {
    page: null,
    isDefault: false,
    isPostList: false,
  },

  fragments: {
    viewer: (variables) => Relay.QL`
    fragment on User {
      ${DefaultLayout.getFragment('viewer', {page: variables.page, condition: variables.isDefault})},
      post(post_name: $page){
        id
        layout{
          id
          meta_value
        }
      }
    }
    `
  }
});

子组件（在此示例中为DefaultLayout）如下所示：

class DefaultLayout extends React.Component{

  componentWillMount(){
    this.props.relay.setVariables({
      page: this.props.page,
      condition: this.props.condition
    })
  }

  render(){
    const { viewer } = this.props;

    if (viewer.post){
      const { post_title, post_content, thumbnail } = viewer.post;

      let bg = {
        backgroundImage: "url('" + thumbnail + "')"
      }

      let heroClass = thumbnail ? "hero_thumbnail" : "hero";
      return(
        <PostContent content={post_content}/>
      )
    } else {
      return <div>Loading...</div>
    }
  }
}

export default Relay.createContainer(DefaultLayout, {

  initialVariables:{
    page: null,
    condition: false
  },

  fragments: {
    viewer: () => Relay.QL`
      fragment on User {
        post(post_name:$page) @include(if: $condition){
          id
          post_title
          post_content
          thumbnail
        },
        settings{
          id
          uploads
          amazonS3
        }
      }
    `
  }

});

运行初始查询时，条件为false，因此它不会获取任何发布数据。在DefaultLayout安装之前，条件变量设置为true，因此它应该查询post并获取该数据。

这是奇怪的事情：我只获得帖子的id和post_title。我没有获得post_content或缩略图。如果我在初始变量中将条件设置为true，那么我得到了所有内容。

我不应该能够改变病情吗？

最后 - 这是生成的查询的屏幕截图。它的查询页面，而不是路线，这似乎是错误的。

Answer 1

我认为问题是你没有通过你预期传递给LayoutComponent的内容。您的page变量可以在Relay的变量商店中找到，而不是在道具上找到：

return (
  <Layout.Component 
    condition={true} 
    layout={Layout}
    page={this.props.relay.variables.page} 
    viewer={viewer} 
  />
);

此外，您可以省略componentWillMount中的DefaultLayout步骤。 page和condition应自动从道具流入变量。

另见：

Relay.js - 条件语句更改时的部分提取

1 个答案: