将 react-helmet 添加到我的 Gatsby 项目中会导致错误：元素类型无效

Question

I have a component Layout which I used to style the layout of my app and that's where I introduced react-helmet我有一个组件Layout ，我用它来设置我的应用程序布局的样式，这就是我介绍react-helmet的地方

The component is like this组件是这样的


import React from 'react';
import { Global, css } from '@emotion/core';
import Helmet from 'react-helmet';
import Header from '../components/header';

const Layout = ({ children }) => (
  <>
    <Global
      styles={css`
        // some CSS style
    />

    <Helmet>
      <html lang="en" />
      <title>title</title>
      <meta name="description" content="site description" />
    </Helmet>

    <Header />
    <main
      css={css`
       // some css
      `}
    >
      {children}
    </main>
  </>
);

export default Layout;

After I added <Helmet /> , I have this error poppin up.添加<Helmet />后，我弹出了这个错误。 And if I removed <Helmet /> from my component, the error would be gone.如果我从组件中删除<Helmet /> ，错误就会消失。 apparently I didn't forgot to export my Layout component so I really have no idea where this came from.显然我没有忘记导出我的Layout组件，所以我真的不知道这是从哪里来的。

Answer 1

You need to use named import with react-helmet .您需要将命名导入与react-helmet一起使用。

import {Helmet} from "react-helmet";

Docs: https://github.com/nfl/react-helmet#example文档： https://github.com/nfl/react-helmet#example

将 react-helmet 添加到我的 Gatsby 项目中会导致错误：元素类型无效

问题描述

1 个解决方案

解决方案1
3 已采纳 2020-05-29 04:52:58

将 react-helmet 添加到我的 Gatsby 项目中会导致错误：元素类型无效

问题描述

1 个解决方案

解决方案1 3 已采纳 2020-05-29 04:52:58

解决方案1
3 已采纳 2020-05-29 04:52:58