在没有实际渲染组件之间的组件的情况下，链式导出如何做出反应？

Question

我理解组件的链接可以通过在每个文件中包含功能组件并在每个父级别导入组件来完成。

例如 A 进口 B 进口 C

假设我们有这 3 个文件 App.js、Home.js 和 HomeContainer.js

App 导入 Home 的地方导入 Homecontainer

App.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

Home.js

import React from 'react';

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

export default Home;

到目前为止，一切都还好，但可以说，我没有为 HomeContainer 创建一个函数组件，而是直接导出了 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 组件。

HomeComponent.js 中的导出默认值如何在父 App.js 中渲染组件 Home

Answer 1

当使用export default 时，给导入的模块起什么名字并不重要。

您只是将标识符指向指定路径中的默认导出。

---

默认导出

在这个例子中，它不需要是Home，它可以是SomeOtherIdentifier，它仍然可以工作。

App.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，则需要导入同名模块。

App.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 关键字将导入的模块别名为另一个名称。

App.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