Question

我一直在使用Typescript中的GraphQL / Apollo进行实验，遇到了大量非常明显的打字问题，让我想知道我是不是做错了。

实际上，我想做的事情（因为它对我来说很有意义）是通过在多个HOC调用中抹灰来组成我的组件的数据。这是我的意思（没有进口）

的例子

interface Props {
  theme: Theme;
}

class Navigation extends React.Component<Props & ViewerProps & PageProps> {
  render() {
    const { viewer, page } = this.props;
    return <h1>Hello, {viewer.name}; welcome to {page.name}</h1>;
  }
}

export default withPage(withViewer(Navigation));

其他地方：

<Navigation theme={this.theme} />

这实际上是阿波罗的任何形式吗？有什么参考资料使用这个或类似的东西吗？

由于

Answer 1

在Apollo 2.1中，他们升级为使用渲染道具功能。

https://reactjs.org/docs/render-props.html这将有助于通过组件进行更强大的输入。

https://dev-blog.apollodata.com/introducing-react-apollo-2-1-c837cc23d926

我使用HoC组件做的一件事就是使用 React.ComponentType 来施放HoC，以便确保您将正确的道具传递给成分

const NavigationContainer: React.ComponentType<Props> = 
  withPage(withViewer(Navigation));
export default NavigationContainer;

撰写阿波罗应用程序

1 个答案: