如果没有实际渲染组件之间的组件，链式导出如何工作？

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 中的 export default 究竟如何呈现父 App.js

中的组件 Home

Answer 1

HomeComponent.js 正在渲染 Home，因为您告诉它这样做！您正在其中导入和导出 Home。

将第二个 HomeComponent.js 视为中间人。它导入和导出另一个组件（模块）。这在 JS 项目中很常见。

查看这些以获取完整的详细信息：
https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export https://javascript.info/import-export

Answer 2

使用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 }

如果没有实际渲染组件之间的组件，链式导出如何工作？

How does a chained export work in react without the components in between actually rendering the component?

javascript

jsx

reactjs

react-component

react-functional-component

默认导出

命名导出