在没有组件实际渲染组件的情况下，链式导出如何在react中工作?

Question

我明白了组件链可以通过在每个文件中都有功能组件并在每个父级导入组件来实现。

例如A进口B进口C

假设我们有这三个文件App.js Home.js和homeconcontainer .js

App导入Home容器

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组件。但即使我们没有创建功能组件并直接导出它，它也会在App.js中作为Home组件呈现而我们的Home组件甚至没有使用<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/exporthttps://javascript.info/import-export