使用 typescript 将组件传递给 apolloprovider答案

【问题标题】：Passing a component to apolloprovider with typescript使用 typescript 将组件传递给 apolloprovider
【发布时间】：2019-10-30 19:57:23
【问题描述】：

我正在尝试将一个反应组件传递给 ApolloProvider 以供使用。我正在使用打字稿，因此需要正确声明类型等。

我的想法是做以下事情

import { ApolloClient } from 'apollo-client';
import { Component } from 'react';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloProvider } from 'react-apollo'; 

class ProjectRequest{

    public provideApolloToComponent(PassedComponent: Component) {
        const client = new ApolloClient({
            link: new HttpLink(),
            cache: new InMemoryCache(),
          });
        return (<ApolloProvider client={client}>
            <PassedComponent />
        </ApolloProvider>);
    }

但是我得到以下错误：

对于阿波罗提供者

Generic type 'ApolloProvider<TCache>' requires 1 type argument(s)

对于传递组件

  Operator '<' cannot be applied to types 'boolean' and 'RegExp'.ts(2365)
'PassedComponent' refers to a value, but is being used as a type here.

最后是 ApolloProvider jsx 元素

Operator '<' cannot be applied to types 'boolean' and 'RegExp'.ts(2365)
Unterminated regular expression literal.

我认为当 PassedComponent 被修复时，它会被修复。

【问题讨论】：

标签： typescript react-apollo apollo-client

【解决方案1】：

我只是把它放在这里以防万一有人遇到类似情况。我正在进行一个我还不是特别熟悉的项目，他们已经以我认为一种正常的方式设置了他们的打字稿，但我通常不使用这种方式，所以 .ts 扩展名是纯打字稿。所以我正在编辑的文件是一个纯 ts 文件，而不是 tsx。这意味着我所有的 React 代码都会像你看到的那样抛出奇怪的错误，一旦我修复了我看到还有其他错误。

provideApolloToComponent 最后的实际代码如下所示

public provideApolloToComponent(PassedComponent: React.ReactType) {
        let localclient = new ApolloClient({
            link: new HttpLink(),
            cache: new InMemoryCache(),
        });
        return (<ApolloProvider client={localclient}>
                   <PassedComponent />
                </ApolloProvider>
        );
    }

【讨论】：