网站开发junke100,做soho一定要做网站吗,深圳设计优化公司,php网站开发背景介绍从同一文件中导出和导入多个组件
如果你只想展示一个 Profile 组#xff0c;而不展示整个图集。你也可以导出 Profile 组件。但 Gallery.js 中已包含 默认 导出#xff0c;此时#xff0c;你不能定义 两个 默认导出。但你可以将其在新文件中进行默认导出#xff0c;或者将…从同一文件中导出和导入多个组件
如果你只想展示一个 Profile 组而不展示整个图集。你也可以导出 Profile 组件。但 Gallery.js 中已包含 默认 导出此时你不能定义 两个 默认导出。但你可以将其在新文件中进行默认导出或者将 Profile 进行 具名 导出。同一文件中有且仅有一个默认导出但可以有多个具名导出
首先用具名导出的方式将 Profile 组件从 Gallery.js 导出不使用 default 关键字
export function Profile() {// ...
}
接着用具名导入的方式从 Gallery.js 文件中 导入 Profile 组件用大括号: import { Profile } from ./Gallery.js;
最后在 App 组件里 渲染 Profile / export default function App() {
return Profile /;
}
现在Gallery.js 包含两个导出一个是默认导出的 Gallery另一个是具名导出的 Profile。App.js 中均导入了这两个组件。尝试将 Profile / 改成 Gallery /回到示例中
import Gallery from ./Gallery.js;
import { Profile } from ./Gallery.js;export default function App() {return (Profile /);
}export function Profile() {return (imgsrchttps://i.imgur.com/QIrZWGIs.jpgaltAlan L. Hart/);
}export default function Gallery() {return (sectionh1了不起的科学家们/h1Profile /Profile /Profile //section);
}示例中混合使用了默认导出和具名导出
Gallery.js: 使用 具名导出 的方式将 Profile 组件导出并取名为 Profile。使用 默认导出 的方式将 Gallery 组件导出。App.js: 使用 具名导入 的方式从 Gallery.js 中导入 Profile 组件并取名为 Profile。使用 默认导入 的方式从 Gallery.js 中导入 Gallery 组件。使用 默认导出 的方式将根组件 App 导出。
