为什么React组件不显示在应用上？

Question

我已经创建了一个组件（在spotifyPlaylist.js中），作为第一步，我试图让应用程序将这个组件作为列表框显示在其他组件旁边，然而当我检查页面时，这个新组件甚至没有显示出来（如下截图）。我是一个新手，所以任何反馈都会有帮助，谢谢你

1. 在.spotifyListspotifyList中创建了该组件。

   import './spotifyPlaylist.css';
   
   export class spotifyPlaylist extends React.Component {
     render() {
       return (
         <div className="spotifyPlaylist">
           <input defaultValue="Existing Playlist" />
         </div>);}}
   

2. 在App.js中导入（这是主文件）。

import { spotifyPlaylist } from '../spotifyPlaylist/spotifyPlaylist';

3. 添加到App组件的渲染中。

   ... 
   render() {
   return (
     <div>
       <div className="App">
         <SearchBar onSearch={this.search} />
         <div className="App-playlist">
           <SearchResults
             onAdd={this.addTrack}
             searchResults={this.state.searchResults}
           />
           <Playlist
             playlistName={this.state.playlistName}
             playlistTracks={this.state.playlistTracks}
             onRemove={this.removeTrack}
             onNameChange={this.updatePlaylistName}
             onSave={this.savePlaylist}
           />
           <spotifyPlaylist />
           </div>
         </div>
       </div>
     </div>
   );
   }
   }```
   

Answer 1

在react中，组件的名字必须以大写字母开头才能在jsx中使用，所以在导入时要重新命名。

import { spotifyPlaylist as SpotifyPlaylist } from '../spotifyPlaylist/spotifyPlaylist';

AND

<SpotifyPlaylist />

或者一起重命名