reactjs - React + ApolloProvider + Typescript = "JSX element class does not support attributes"错误

Question

嘿嘿伙计们，
我对 typescript 比较陌生，我希望我不会在这里忽略一些明显的东西。 :)

我正在尝试将 Apollo 添加到 Typescript 项目，以便能够使用来自 GraphQL API 的数据。 Here a link到我试图遵循的文档。

我遇到的问题是，一旦我尝试在我的 ReactDOM 渲染方法中使用 ApolloProvider，Typescript 就会提示(在 ApolloProvider 行上)以下错误。

TS2607:JSX element class does not support attributes because it does not have a 'props' property

import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { ApolloProvider } from 'react-apollo';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './components/08-pages/App';

const client = new ApolloClient({
    cache: new InMemoryCache(),
    link: new HttpLink(),
});

ReactDOM.render(
        <ApolloProvider client={client}>
            <App />
        </ApolloProvider>,
        document.getElementById('root'),
);

有关如何解决此问题的任何提示？提前致谢。

Answer 1

您使用的方式 ApolloProvider似乎一切都很好。当 TypeScript 进行静态类型检查时会发生此问题。

TypeScript 为 props 和 state 提供了针对未知类型的静态类型检查。在这种情况下，是说我们不能将属性应用于元素，因为我们没有提供泛型类型 P 来定义允许包含哪些 Prop 。

请检查您的 App , 确保在必要时定义 props 或 state 的类型。如果只需要 Prop 类型，请说 PropsType ，然后是您的 App定义应该是

class App extends React.Component<PropsType, any> {
...
}