如何在 App.js 中顯示同一文件中的多個組件？

Question

我正在學習 React.js。 我需要知道如何在 App.js 中顯示多個組件。 我有 2 個頁面，分別是Home.js and About.js 。

運行代碼后只需單擊關於我們，您將只獲得關於頁面文本。 但是我在 About.js 文件中也有關於團隊和關於內容的內容。 那不顯示。 我導入

import { About, AboutTeam, AboutContent } from "./Pages/About";

但直到現在才使用，因為我不知道應該在哪里添加AboutTeam, AboutContent 。 請檢查我的App.js文件。 我只需要當用戶點擊 About us 時它就會顯示我在About.js中擁有的所有組件。

我在這里添加了示例https://codesandbox.io/s/happy-almeida-t6q7w?file=/src/App.js

我正進入（狀態

這是我預期的 output

還有一個疑問，我正在使用下面的代碼，那么這段代碼是正確的使用方法嗎？

你能幫我解決這個問題嗎？

主頁.js

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './css/Style.css';

const Home=()=>{
  return(
    <div className="">
        <h2>Home page</h2>
    </div>
  );
}
export default Home;

關於.js

    import React from 'react';
    import 'bootstrap/dist/css/bootstrap.min.css';
    import './css/Style.css';

    const About=()=>{
      return(
        <div className="">
            <h2>About page</h2>
        </div>
      );
    }
const AboutTeam = () => {
  return (
    <div className="">
      <h2>About Team dummy text</h2>
    </div>
  );
};

const AboutContent = () => {
  return (
    <div className="">
      <h2>About content dummy text</h2>
    </div>
  );
};

export { About, AboutTeam, AboutContent };

應用程序.js

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './css/Style.css';
import HeaderMenu from './components/Header';
import Home from './pages/Home';
import { About, AboutTeam, AboutContent } from "./Pages/About";
import Footer from './components/Footer';
import { BrowserRouter, Route, Switch } from 'react-router-dom';


const App=()=>{
  return(
    <BrowserRouter>
      <HeaderMenu />
    <div className="">
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about"  component={About} />
        </Switch>
    </div>
    <Footer />
    </BrowserRouter>
  );
}
export default App;

索引.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

import * as serviceWorker from './serviceWorker';

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

serviceWorker.unregister();

Answer 1

您可以在 App.js 中編寫

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './css/Style.css';
import HeaderMenu from './components/Header';
import Home from './pages/Home';
import { About, AboutTeam, AboutContent } from "./Pages/About";
import Footer from './components/Footer';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

const AboutPage = () => (
  <>
    <About />
    <AboutTeam />
    <AboutContent />
  </>
);

const App=()=>{
  return(
    <BrowserRouter>
      <HeaderMenu />
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={AboutPage} />
        </Switch>
      <Footer />
    </BrowserRouter>
  );
}
export default App;

Answer 2

如果import {About, AboutTeam} from... ，則需要導出 2 個變量：

export const About = ...
export const AboutTeam = ...

不建議在 1 個文件中包含太多組件，但如果您真的想導入 all ，這也是可能的：

import * as About from './About.js'

... <About.About /> ... <About.AboutTeam /> ...

Answer 3

// About.js

const AboutTeam = () => {
  return (
    <div className="">
      <h2>About Team</h2>
    </div>
  );
};
const About = () => {
  return (
    <div className="">
      <h2>About page</h2>
    </div>
  );
};

export { About, AboutTeam };

然后將其導入為

import { About, AboutTeam } from './About.js'

Answer 4

您可以在一個文件中創建多個組件，如下所示：

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './css/Style.css';

export const AboutTeam =() => {
    return (
     <div>About Team Page </div>
    )
}

export const About =()=>{
  return(
    <div className="">
        <h2>About page</h2>
    </div>
  );
}

一切看起來都很好，但是您不應將className留空，並且在BrowserRouter內應該只有一個包裝器，因此您應該將所有元素包裝在div中。

Answer 5

使用export而不是export default從同一個文件中導出兩個組件（About.js）

//About.js

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './css/Style.css';

const About=()=>{
  return(
    <div className="">
        <h2>About page</h2>
    </div>
  );
}

const AboutTeam=()=>{
  return(
    <div className="">
      <h2>About Team</h2>
    </div>
  );
}

export {About, AboutTeam};

然后將其導入您需要的文件中，

import {About, AboutTeam} from "./About.js";

除了解決方案，還要記住的一件事是

• 使用export default導出的組件，像這樣導入

  從“./文件路徑”導入關於；

• 使用export 導出的組件，是/被導入的

  從“./文件路徑”導入{About，AboutTeam}；