reactjs - ReactJS-Webpack编译错误: Module build failed

Question

我是React的新手。我一直在学习有关Udemy的React类(class)，但遇到了一个问题。该错误非常明显，我尝试解决该错误，但是我无法确定我的代码出了什么问题。

这是我的项目结构



这是我在控制台中遇到的错误。

ERROR in ./src/components/video_list.js
Module build failed: SyntaxError: Unexpected token (5:8)

  3 | 
  4 | class VideoList extends Component{
> 5 |   const videoItems = this.props.videos.map((video) => {
    |         ^
  6 |     return <VideoListItem video={video} />
  7 |   });
  8 | 

 @ ./src/index.js 21:18-52
webpack: Failed to compile.

这是我的错误代码“video_list.js”的源代码

import React, {Component} from 'react';
import VideoListItem from './video_list_item';

class VideoList extends Component{
  const videoItems = this.props.videos.map((video) => {
    return <VideoListItem video={video} />
  });

  render(){
    return (
      <ul className="col-md-4 list-group">
        {videoItems}
      </ul>
    );
  }
}

export default VideoList;

我已经正确导入和导出了所有内容。因为如果将上面的代码更改为此，它可以很好地工作(编译)并给出预期的结果。

import React, {Component} from 'react';
import VideoListItem from './video_list_item';

class VideoList extends Component{
  // const videoItems = this.props.videos.map((video) => {
  //   return <VideoListItem video={video} />
  // });

  render(){
    return (
      <ul className="col-md-4 list-group">
        {this.props.videos.length}
      </ul>
    );
  }
}

export default VideoList;

我的代码出了什么问题？我的videoItems函数出了什么问题。

这是关于udemy的this教程。在类(class)中，它遵循基于组件的结构。但是，根据我的喜好，我使用基于类的结构(class VideoList extends Component)

Answer 1

将videoItems函数移至render()函数并解决了该问题。这是一个困惑。