为啥 React 组件不显示在应用程序上？

Posted 2023-02-23

【中文标题】为啥 React 组件不显示在应用程序上？

【英文标题】：Why doesn't React component show up on the app?为什么 React 组件不显示在应用程序上？

【发布时间】：2020-10-01 13:20:03

【问题描述】：

我已经创建了一个组件（在 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只是一个容器...您希望看到什么？

【参考方案1】：

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

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

与

<SpotifyPlaylist />

或者一起重命名