React.createElement: тип недействителен при использовании нескольких скриптов Helmet React Typescript

У меня есть компонент 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: недопустимый тип - ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined. Скорее всего, вы забыли экспортировать свой компонент из файла, в котором он определен.

Проверьте метод рендеринга SeoModule.

6 | export default (props) =>

Пустой тег `<>` в SeoModule является причиной этого или это тиф ??

Panther 28.11.2018 09:26

нам нужно обернуть рендеринг родительским элементом при использовании нескольких классов, иначе возникает ошибка

sam 28.11.2018 09:30

Вы используете последний плагин response и последний плагин babel react-jsx, так как этот синтаксис был введен в 16.2?

Panther 28.11.2018 09:34

@Panther Я использую "@ types / response": "^ 16.4.9"

sam 28.11.2018 09:36

Вы пробовали обернуть все возвращенные элементы в div?

Ben Swindells 28.11.2018 09:40

Документ react-helmet указывает на импорт как import {Helmet} from "react-helmet";. это помогает?

Panther 28.11.2018 09:40

@Panther я пробовал, но все равно :(

sam 28.11.2018 09:44

@Ben Swindells, это сработало !!!!! большое спасибо :)

sam 28.11.2018 09:49

@sam Нет проблем! Обязательно отметьте ответ на вопрос, чтобы закрыть вопрос :)

Ben Swindells 28.11.2018 09:53
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
9
608
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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, так как код шлема необходимо встроить в элемент div или HTML.

Другие вопросы по теме