Недопустимый тип элемента: undefined - Reactjs

Question

У меня есть следующая ошибка: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of 'Screens/Enjoy.js'.

со следующим кодом:

import React, {Component, Fragment} from 'react';
import ReactDOM from 'react-dom';
import { renderToString, AMP } from 'react-amp-template'

class Enjoy extends Component {
render() {
        const { Title, Link, Carousel } = AMP;
const amppage = (
            <Fragment>
                <Title>Hello guys :)</Title>
                <Link rel="canonical" href="http://localhost" />
                    <h1>Hello World</h1>
                    <Carousel lightbox width="400" height="300" layout="responsive" type="slides">
                        <amp-img src="image.jpg" width="400" height="300" layout="responsive"></amp-img>
                        <amp-img src="image.jpg" width="400" height="300" layout="responsive"></amp-img>
                        <amp-img src="image.jpg" width="400" height="300" layout="responsive"></amp-img>

                    </Carousel>
            </Fragment>
        );
        return(
                amppage
              )
    }
}
export default Enjoy

Я использую «реагировать»: «15.3.1» и «реагировать-дом»: "15.3.1"

Скажите, пожалуйста, в чем может быть дело?Я смотрел на подобные ошибки, но их решения мне не помогли.Заранее большое спасибо!

upd: Мне очень жаль, я пропустил метод render(), когда скопировал его в код!

Answer 1

Вы не можете помещать объявления констант в тело класса. Либо переместите константы за пределы класса, либо определите свойство как свойство класса, как я это сделал.

Также написание слова по умолчанию неверно. Исправьте это также

ВАРИАНТ 1:

const amppage = (
  <Fragment>
    <Title>Hello guys :)</Title>
    <Link rel="canonical" href="http://localhost" />
    <h1>Hello World</h1>
    <Carousel lightbox width="400" height="300" layout="responsive" type="slides">
      <amp-img src="image.jpg" width="400" height="300" layout="responsive"></amp-img>
      <amp-img src="image.jpg" width="400" height="300" layout="responsive"></amp-img>
      <amp-img src="image.jpg" width="400" height="300" layout="responsive"></amp-img>

    </Carousel>
  </Fragment>
);
class Enjoy extends Component {
    render() {
            return amppage;
    }
}
export default Enjoy;

ВАРИАНТ 2:

class Enjoy extends Component {
    amppage = (
        <Fragment>
          <Title>Hello guys :)</Title>
          <Link rel="canonical" href="http://localhost" />
          <h1>Hello World</h1>
          <Carousel lightbox width="400" height="300" layout="responsive" type="slides">
            <amp-img src="image.jpg" width="400" height="300" layout="responsive"></amp-img>
            <amp-img src="image.jpg" width="400" height="300" layout="responsive"></amp-img>
            <amp-img src="image.jpg" width="400" height="300" layout="responsive"></amp-img>

          </Carousel>
        </Fragment>
    );
    render() {
            return this.amppage;
    }
}
export default Enjoy;

Answer 2

Если вы используете class компоненты, вам нужен метод render:

class Enjoy extends Component {
    const amppage = (
            <Fragment>
                <Title>Hello guys :)</Title>
                <Link rel="canonical" href="http://localhost" />
                    <h1>Hello World</h1>
                    <Carousel lightbox width="400" height="300" layout="responsive" type="slides">
                        <amp-img src="image.jpg" width="400" height="300" layout="responsive"></amp-img>
                        <amp-img src="image.jpg" width="400" height="300" layout="responsive"></amp-img>
                        <amp-img src="image.jpg" width="400" height="300" layout="responsive"></amp-img>

                    </Carousel>
            </Fragment>
        );
    render() {
        return amppage;
    }
}
export default Enjoy;

Однако, поскольку вы не используете методы жизненного цикла, вы можете использовать вместо этого функциональный компонент:

const Enjoy = (props) => {
const amppage = (
            <Fragment>
                <Title>Hello guys :)</Title>
                <Link rel="canonical" href="http://localhost" />
                    <h1>Hello World</h1>
                    <Carousel lightbox width="400" height="300" layout="responsive" type="slides">
                        <amp-img src="image.jpg" width="400" height="300" layout="responsive"></amp-img>
                        <amp-img src="image.jpg" width="400" height="300" layout="responsive"></amp-img>
                        <amp-img src="image.jpg" width="400" height="300" layout="responsive"></amp-img>

                    </Carousel>
            </Fragment>
        );
        return(
                amppage
              )
}
export default Enjoy;

Если вы используете функциональный компонент, вы можете просто вернуться (как вы это делали).Поскольку тело функционального компонента совпадает с телом метода render в компонентах класса.

Там, где вы видите ошибку, говорит вам, что когда React вызывает метод render, он ожидаеткомпонент обратно, но в настоящее время он undefined, потому что нет тела render.

Кроме того, поддержка Fragment не была введена до React версии 16.2.0.Таким образом, в 15.x вам нужно будет обернуть в div:

class Enjoy extends Component {
    const amppage = (
            <div>
                <Title>Hello guys :)</Title>
                <Link rel="canonical" href="http://localhost" />
                    <h1>Hello World</h1>
                    <Carousel lightbox width="400" height="300" layout="responsive" type="slides">
                        <amp-img src="image.jpg" width="400" height="300" layout="responsive"></amp-img>
                        <amp-img src="image.jpg" width="400" height="300" layout="responsive"></amp-img>
                        <amp-img src="image.jpg" width="400" height="300" layout="responsive"></amp-img>

                    </Carousel>
            </div>
        );
    render() {
        return amppage;
    }
}
export default Enjoy;