Передача компонента в apolloprovider с машинописью - PullRequest
Новая
       14

Передача компонента в apolloprovider с машинописью

0 голосов
/ 17 июня 2019

Я пытаюсь передать реагирующий компонент 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.

и для конечного jsx-элемента ApolloProvider 

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

, который, как я полагаю, будет исправлен, когда будет зафиксирован PassedComponent.

1 Ответ

0 голосов
/ 17 июня 2019

Я просто добавляю это сюда на случай, если кто-нибудь окажется в подобной ситуации.Я нахожусь в проекте, с которым я еще не особенно знаком, и они установили свой машинописный текст, я полагаю, обычным способом, но тот, который я обычно не использую, поэтому расширение .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>
        );
    }
...