React + ApolloProvider + Typescript = "JSX 元素类不支持属性" 错误

Question

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

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

我遇到的问题是，一旦我尝试在我的 ReactDOM 渲染方法中使用 ApolloProvider，Typescript 就会（在 ApolloProvider 行）抱怨以下错误..

TS2607:JSX 元素类不支持属性，因为它支持 没有“道具”属性

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 来定义允许包含哪些道具。

请检查您的App，确保在必要时定义道具或状态的类型。如果只需要道具类型，比如PropsType，那么你的App 定义应该是

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

Answer 2

先试试加()，点赞

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

如果不起作用，请用以下内容替换它：

ReactDOM.render(<App />, document.getElementById("root"));

然后，在你的App 组件的render 方法中，将ApolloProvider 中的内容包裹起来

render(){
  <ApolloProvider client={client} >
     ...
  </ApolloProvider>
}