在沒有實際渲染組件之間的組件的情況下，鏈式導出如何做出反應？

Question

賞金將在 7 天后到期。 此問題的答案有資格獲得+50聲望賞金。 Himanshu Poddar正在從有信譽的來源尋找答案：

當中間組件不完全呈現而只是導出組件時，需要解釋此鏈接的確切工作

我理解可以通過在每個文件中包含功能組件並在每個父級別導入組件來完成組件鏈接的觀點。

例如 A 進口 B 進口 C

假設我們有這 3 個文件 App.js、Home.js 和 HomeContainer.js

App 在哪里導入 Home 導入 Homecontainer

應用程序.js

import './App.css';
import HomeContainer from './containers/HomeContainer';

function App() {
  return (
    <div className="App">
      <HomeContainer/>
    </div>
  );
}
export default App;

HomeContainer.js

import Home from "../components/Home";
function HomeContainer(props) {
    return (
        <div>
            <Home/>
        </div>
    )
}
export default HomeContainer

主頁.js

import React from 'react';

function Home(props) {
    return (
        <div>
            <h1>Home</h1>
        </div>
    )
}

export default Home;

到目前為止，一切都還好，但可以說，我沒有為 HomeContainer 創建 function 組件，而是直接導出了 Home 組件，即使這樣我也看到它正在工作。

HomeContainer.js變成

import Home from "../components/Home";
export default Home

我想知道這到底是如何工作的，因為 APP.js 正在渲染 HomeContainer 組件，但 HomeContainer 組件沒有渲染任何類似<Home/>的東西，但 Home 組件仍然在 APP.js 中渲染。

我希望 App 渲染第一個功能組件 HomeContainer，然后再渲染 Home 組件。 但是即使我們不創建功能組件並直接導出它，當我們的 HomeComponent 甚至沒有使用命令<Home/>渲染它時，它也會在 App.js 中渲染為 Home 組件

App.js HomeComponent.js呈現組件Home

Answer 1

使用export default時，給導入的模塊起什么名字並不重要。

您只是將標識符指向指定路徑中的默認導出。

---

默認導出

在這個例子中，它不需要是Home ，它可以是SomeOtherIdentifier並且它仍然可以工作。

應用程序.js

import './App.css';
import SomeOtherIdentifier from './containers/HomeContainer';

function App() {
  return (
    <div className="App">
      <SomeOtherIdentifier/>
    </div>
  );
}
export default App;

HomeContainer.js

import Home from "../components/Home";
export default Home

---

命名導出

另一方面，如果您要使用named export ，則需要導入具有相同名稱的模塊。

應用程序.js

import './App.css';
import { HomeContainer } from './containers/HomeContainer';

function App() {
  return (
    <div className="App">
      <HomeContainer/>
    </div>
  );
}
export default App;

HomeContainer.js

import Home from "../components/Home";
export { HomeContainer }

---

或者您可以使用as關鍵字將導入的模塊別名為另一個名稱。

應用程序.js

import './App.css';
import { HomeContainer as SomeOtherIdentifier } from './containers/HomeContainer';

function App() {
  return (
    <div className="App">
      <SomeOtherIdentifier/>
    </div>
  );
}
export default App;

HomeContainer.js

import Home from "../components/Home";
export { HomeContainer }

Answer 2

HomeComponent.js正在渲染Home ，因為您告訴它這樣做！ 您正在其中導入和導出Home 。

將第二個HomeComponent.js視為中間人。 它導入和導出另一個組件（模塊）。 這在 JS 項目中很常見。

有關完整的詳細信息，請參閱這些：
https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export https://javascript.info/import-export