时间戳

首页 > 解决方案 > 找不到模块“./components/video_list”

reactjs - 找不到模块“./components/video_list”

问题描述

我正在制作 youtube 搜索应用程序。我有头部组件的三个组件索引，其余两个是： 1-video_list 2-video_item

index.js 的编码

import React,{Component} from 'react';
import ReactDOM from 'react-DOM';
import Search from './components/search';
import Video_list from './components/video_list';
import YTSearch from 'youtube-api-search';
const  API_KEY="xxxxxxxxxxxxxx";


class App extends Component {
  constructor(props){
    super(props);

    this.state = {
      videos:[]
    };
    YTSearch({key:API_KEY,term:'hitesh choudhary'},(videos) => {
      this.setState({videos});
    });

  }
  render(){
    return(
      <div>
        <Search />
        <Video_list videos={this.state.videos} />
      </div>
    );
  }
}

ReactDOM.render(<App />,document.querySelector('.container'));

video_list 的代码

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


class video_list extends Component {
  const videoItem = this.props.videos.map((video) => {
    return <VideoListItem video={video} />;
  });
  render(){
    return(
      <div>
        <ul className="col-md-4 list-group">
          {videoItem}
        </ul>
      </div>
    );
  }
}
export default video_list;

video_item.js 的代码

    import React,{Component} from 'react';

class video_item extends Component {
  render(){
    return(
      <li>{this.props.video}</li>
    );
  }
}

export default video_item;

控制台显示我找不到模块“./components/video_list”

标签： reactjs

解决方案

您需要在 React 中将组件名称大写，否则 JSX 会将它们视为 HTML 标记。

将组件声明为

class VideoList

和

class VideoItem

更多细节请参考官方文档JSX in Depth。

推荐阅读