是否有可能在React js的类体外声明与该类同名的函数？

Question

我一直在尝试解决此问题。

我收到此错误：

./ src / components / App / App.js

行76:11：解析错误：标识符'App'已被声明

App.js：

import React from 'react';
import './App.css';
import PlayList from "../PlayList/PlayList";
import SearchBar from "../SearchBar/SearchBar";
import SearchResults from "../SearchResults/SearchResults";
import spotify from "./util/spotify";

class App extends React.Component {
  constructor(props) {
    super(props);

   ....body of the class.....
}

 function App() {
  return (
    <div>
      <h1>
        <a href="http://localhost:3000">Audiophile</a>
      </h1>
      <div className="App">
        <SearchBar onSearch={this.search} />
        <div className="App-PlayList">
          <SearchResults SearchResults={this.SearchResults} onAdd={this.doThese} />
          <PlayList playListTracks={this.state.playListTracks} onNameChange={this.updatePlaylistName} onRemove={this.removeTrack} onSave={this.savePlayList} />
        </div>
      </div>
    </div>
  );
}

export default App;

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App/App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode> 
    <App/>
  </React.StrictMode>,
  document.getElementById('root')
);

Answer 1

您不能以相同的名称命名两件事……至少在同一文件中。无论如何，你为什么要这么做？尝试命名第二件事。