Question

我想自动将<Layout />容器组件添加到我的所有<View />组件中。

在这种情况下，Layout组件无法知道它将获得View，因此我无法将Relay.createContainer应用于Layout因为我没有声明继电器容器规格。

由于View包含Layout，RelayRootContainer.component会收到布局组件，这是一个非中继容器，当然，它会抛出错误。

这是我的布局组件：

export default class MainLayout extends React.Component {
  render() {
    return (
      <div>
        <Header />
        {this.props.children}
        <Footer />
      </div>
    );
  }
}

在向视图添加中继功能后，它现在看起来像这样。

class HomeView extends React.Component {
  render() {
    <ul>
      {this.props.store.posts.map(post =>
        <li key={post.id}>
          {post.name}
        </li>
      }
    </ul>
  }
}

const RelayHomeView = Relay.createContainer(HomeView, {
  fragments: {
    store: () => Relay.QL`
      fragment on Store {
        posts {
            id,
            name,
        }
      }
    `
  }
});

export default RelayHomeView;

我提出了两种可能的解决方法：

使用高阶组件布局，并在“视图”中将中继容器规范声明为静态属性。但是，这违反了导出已构建的中继容器的惯例
在“布局”组件中包裹渲染视图。不幸的是，这需要导入并包装组件中的所有视图，从而增加了许多样板文件

如何使用常规React容器包装RelayContainer？

0 个答案: