头盔不是有效的 jsx 元素答案

【问题标题】：Helmet is not a valid jsx element头盔不是有效的 jsx 元素
【发布时间】：2021-03-23 02:27:18
【问题描述】：

我在反应样板模板中有这个问题。

打字错误
“头盔”不能用作 JSX 组件。它的实例类型“头盔”不是有效的 JSX 元素。 TS2786

     7 |   return (
     8 |     <>
  >  9 |       <Helmet>
       |        ^
    10 |         <title>404 Page Not Found</title>
    11 |         <meta name="description" content="Page not found" />
    12 |       </Helmet>

导入为

import { Helmet } from 'react-helmet-async';

调查“”显示此错误

HelmetProvider' 不能用作 JSX 组件。它的实例类型“HelmetProvider”不是有效的 JSX 元素。 “HelmetProvider”类型缺少“ElementClass”类型的以下属性：render、context、setState、forceUpdate 和 3 个以上。ts(2

`import { HelmetProvider } from 'react-helmet-async';

为什么这不起作用？

【问题讨论】：

你有上下文提供者吗？您是否使用了与您从中获取该代码的文档相匹配的正确版本的库？
我刚刚安装并运行了这个：github.com/react-boilerplate/react-boilerplate-cra-template 根据我有限的 redux 知识，我可以看到主题提供者和头盔提供者包装了应用程序。
很好，请将该信息编辑到问题本身中。
VSCode 在使用同步头盔包时向我显示了完全相同的错误。但是，“开发人员：重新加载窗口”足以“修复”它。

标签： reactjs typescript

【解决方案1】：

我可以通过安装 @types/react-helmet 解决这个问题。

npm install --save @types/react-helmet

【讨论】：

这就是答案。
将 react-helmet 替换为异步版本后出现此错误。我将提供程序放在树的顶部，即使安装了这些类型，我也会收到作者报告的错误。还有什么建议吗？另外，为什么是 types/react-helmet 而不是 types/react-helmet-async？提前谢谢你
显然这是从 1.0.9 版本开始发生的错误。在他们的 Github 页面上有一个未解决的问题 github.com/staylor/react-helmet-async/issues/139
同样的错误并将 react-helmet-async 升级到 1.1.2，解决了问题

【解决方案2】：

我也使用 react 样板模板遇到了这个错误。这为我解决了错误！

yarn upgrade @types/react@latest

【讨论】：

【解决方案3】：

https://github.com/staylor/react-helmet-async#usage

我认为您需要默认导入它，因为您可能使用的是旧版本。

import Helmet from 'react-helmet-async'

【讨论】：

这是猜测，不是答案
将其更改为默认导入并没有帮助，但它可能是从锅炉板中获取的旧版本：github.com/react-boilerplate/react-boilerplate-cra-template
@AlexanderHemming 你能提供一个密码箱吗？
我认为它不足以提供这样的东西。但是，如果您想尝试，除了启动样板链接中的内容之外，我没有做任何其他事情。
@AlexanderHemming 我确实做到了，它对我有用。 ?