javascript - 元素类型无效 : undefined - Reactjs

Question

我有以下错误:元素类型无效:需要一个字符串(对于内置组件)或一个类/函数(对于复合组件)，但得到:未定义。检查“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

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

此外，单词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;