React.createElement：使用多个 Helmet React Typescript 时类型无效答案

【问题标题】：React.createElement: type is invalid when using multiple Helmet React TypescriptReact.createElement：使用多个 Helmet React Typescript 时类型无效
【发布时间】：2018-11-28 08:23:49
【问题描述】：

我有一个 seo 组件，它给了我 React.createElement 错误，从过去 2 天开始我一直在努力让它工作，有人可以帮我解决这个问题

SeoModule.tsx

import * as React from 'react';
import Helmet from 'react-helmet';
import FacebookSeo from './FacebookSeo';
import TwitterSeo from './TwitterSeo';

type propTypes = {
    ...
}

export default class SeoModule extends React.Component<propTypes> {
    render() {
        return (
            <> 
                <Helmet title = {seo.title}>
                    <script type="application/ld+json">{
                        JSON.stringify(structuredData)
                    }</script>
                </Helmet>    
                <FacebookSeo
                    desc={seo.desc}
                    image={seo.image}
                    title={seo.title}
                    type={event ? 'event' : null}
                    url={seo.url}
                />
                <TwitterSeo
                    type={event ? 'summary_large_image' : null}
                    title={seo.title}
                    image={seo.image}
                    desc={seo.desc}
                    username={twitter}
                />  
            </>
        )
    }
}

和 FacebookSeo.tsx

import * as React from 'react';
import Helmet from 'react-helmet';

type propTypes = {
  ...
};

export default class FacebookSeo extends React.Component<propTypes> {
  render() {
    const {url, type, title, desc, image} = this.props;
    return (
      <Helmet>
        {url && <meta property="og:url" content={url} />}
        {type && <meta property="og:type" content={type} />}
        {title && <meta property="og:title" content={title} />}
        {desc && <meta property="og:description" content={desc} />}
        {image && <meta property="og:image" content={image} />}
      </Helmet>
    );
  }
}

和 TwitterSeo.tsx

import * as React from 'react';
import Helmet from 'react-helmet';

type propTypes = {
  ...
};

export default class TwitterSeo extends React.Component<propTypes> {
  render() {
    const {username, type, title, desc, image} = this.props;
    return (
      <Helmet>
        <meta name="twitter:card" content={type} />
        {username && <meta name="twitter:creator" content={username} />}
        {title && <meta name="twitter:title" content={title} />}
        {desc && <meta name="twitter:description" content={desc} />}
        {image && <meta name="twitter:image" content={image} />}
      </Helmet>
    );
  }
}

但是上面的代码给了我一个错误

React.createElement：类型无效 - 需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件。

检查SeoModule的渲染方法。

6 |导出默认（道具）=>

【问题讨论】：

SeoModule 中的空 ` ` 标记是它的原因还是台风？？
我们需要在使用多个类时用父元素包装渲染，否则会抛出错误
你使用的是最新的 react 和最新的 babel react-jsx 插件吗，因为这个语法是在 16.2 中引入的？
你尝试过将所有返回的元素包装在一个 div 中吗？
react-helmet 文档指定像 import {Helmet} from "react-helmet"; 一样导入。这有帮助吗？

标签： reactjs typescript react-helmet

【解决方案1】：

答案：

 export default class FacebookSeo extends React.Component<propTypes> {
  render() {
    const {url, type, title, desc, image} = this.props;
    return (
    <div>
      <Helmet>
        {url && <meta property="og:url" content={url} />}
        {type && <meta property="og:type" content={type} />}
        {title && <meta property="og:title" content={title} />}
        {desc && <meta property="og:description" content={desc} />}
        {image && <meta property="og:image" content={image} />}
      </Helmet>
    </div>
    );
  }
}

将渲染的代码包装在 div 标签中，因为 Helmet 代码需要嵌入到 div 或 HTML 元素中

【讨论】：