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

Posted 2023-03-08

【中文标题】React + ApolloProvider + Typescript = "JSX 元素类不支持属性" 错误

【英文标题】：React + ApolloProvider + Typescript = "JSX element class does not support attributes" error

【发布时间】：2018-10-04 10:55:10

【问题描述】：

嘿，伙计们， 我对 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'),
);

关于如何解决这个问题的任何提示？提前致谢。

【参考方案1】：

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

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

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

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

【讨论】：

我什至尝试使用“any”作为 App 的 props 类型，如下所示：export default class App extends React.Component<any, any> 但也无济于事。我开始认为这在某种程度上与 IDE 使用的 Typescript 编译器有关：我正在研究 phpStorm。如果我在 Webstorm 或 Visual Studio Code 上打开同一个项目，IDE 不会抱怨这一行（或其他小问题，这似乎也不是问题）。我可以看到 Webstorm 能够从 node_modules (2.8.3) 加载 TS 编译器，而 PHPStorm 不能，并使用与 IDE (2.2.1) 捆绑的那个

..并添加更多关于该主题的内容：此 TS 警告不会阻止我的应用程序编译。这就是为什么我认为这可能只是 IDE 发出了错误警告。

对于那些仍然遇到这种情况的人：确保您的包含列表中有**/*.tsx 文件。我只包含了导致上述错误的**/*.ts（除其他外）。

【参考方案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>

【讨论】：

Hej Kevin，感谢您的建议。我都试过了，但不幸的是错误仍然存​​在。 :)

抱歉没用，我觉得和typscript静态类型检查有关，看我下面的回答，希望对你有帮助。