Question

Hej伙计们，我对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组件的渲染方法中，将内容包装在ApolloProvider中

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

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

2 个答案: