Question

我正在尝试将react组件传递给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>);
    }

但是我遇到以下错误：

对于ApolloProvider

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

对于PassedComponent

  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被修复时将被修复。

Answer 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>
        );
    }

使用打字稿将组件传递给apolloprovider

1 个答案: