Question

我正在制作youtube搜索应用。我对头部组件有三个组件索引，其余两个是： 1个视频列表 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'));

视频列表代码

    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”

Answer 1

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

将组件声明为

class VideoList

和

class VideoItem

有关更多详细信息，请参考官方文档JSX in Depth。

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

1 个答案: