javascript - 为什么 React 组件不显示在应用程序上？

Question

我创建了一个组件（在 spotifyPlaylist.js 中），作为第一步，我试图让应用程序将此组件显示为其他组件旁边的列表框，但是当我检查页面时这个新组件甚至不显示（截图如下）。我是新手，希望大家多多指教，谢谢！

1. 在 ./spotifyList/spotifyList 中创建组件

   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>
   );
   }
   }```
   

标签： javascriptreactjsimportcomponentsjsx

Answer 1

在 react 组件名称必须以大写字母开头才能在 jsx 中使用，因此在导入时以太重命名它：

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

和

<SpotifyPlaylist />

或者一起重命名