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

【问题标题】：Why doesn't React component show up on the app?为什么 React 组件不显示在应用程序上？
【发布时间】：2026-02-18 09:30:01
【问题描述】：

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

在 ./spotifyList/spotifyList 中创建组件

import './spotifyPlaylist.css';

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

在 App.js 中导入（主文件）

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

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

【问题讨论】：

没有什么可显示的，因为...输入没有价值...div只是一个容器...您希望看到什么？

标签： javascript reactjs import components jsx

【解决方案1】：

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

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

与

<SpotifyPlaylist />

或者一起重命名

【讨论】：