元素类型无效：未定义 - 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

我正在使用 "react": "15.3.1" 和 "react-dom": "15.3.1"

请告诉我，可能是什么问题？我查看了类似的错误，但他们的解决方案对我没有帮助。非常感谢！

更新：非常抱歉，我在代码中复制的时候遗漏了render()方法！

Answer 1

您不能将常量声明放在 class 主体中。要么将常量移到 class 之外，要么像我所做的那样将属性定义为 class 属性。

此外，单词 default 的拼写错误。也纠正一下

选项 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;

如果您使用功能组件，那么您可以简单地return（就像您所做的那样）。因为功能组件的主体与class个组件中的render方法的主体相同。

您看到的错误告诉您，当 React 调用 render 方法时，它需要一个组件返回，但它目前是 undefined 因为没有 render.

此外，直到 React 版本 16.2.0 才引入对 Fragment 的支持。因此，在 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;

元素类型无效：未定义 - Reactjs

Element type is invalid: undefined - Reactjs

javascript

reactjs

amp-html