У меня есть компонент 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) =>
нам нужно обернуть рендеринг родительским элементом при использовании нескольких классов, иначе возникает ошибка
Вы используете последний плагин response и последний плагин babel react-jsx, так как этот синтаксис был введен в 16.2?
@Panther Я использую "@ types / response": "^ 16.4.9"
Вы пробовали обернуть все возвращенные элементы в div?
Документ react-helmet указывает на импорт как import {Helmet} from "react-helmet";. это помогает?
@Panther я пробовал, но все равно :(
@Ben Swindells, это сработало !!!!! большое спасибо :)
@sam Нет проблем! Обязательно отметьте ответ на вопрос, чтобы закрыть вопрос :)





Отвечать:
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.
Пустой тег `<>` в
SeoModuleявляется причиной этого или это тиф ??