从同一文件中导出和导入多个组件

简介: 从同一文件中导出和导入多个组件

从同一文件中导出和导入多个组件

如果你只想展示一个 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,另一个是具名导出的 ProfileApp.js 中均导入了这两个组件。尝试将 <Profile /> 改成 <Gallery />,回到示例中:

import Gallery from './Gallery.js';
import { Profile } from './Gallery.js';
 
export default function App() {
  return (
    <Profile />
  );
}
export function Profile() {
  return (
    <img
      src="https://i.imgur.com/QIrZWGIs.jpg"
      alt="Alan L. Hart"
    />
  );
}
 
export default function Gallery() {
  return (
    <section>
      <h1>了不起的科学家们</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

示例中混合使用了默认导出和具名导出:

  • Gallery.js:
  • 使用 具名导出 的方式,将 Profile 组件导出,并取名为 Profile
  • 使用 默认导出 的方式,将 Gallery 组件导出。
  • App.js:
  • 使用 具名导入 的方式,从 Gallery.js 中导入 Profile 组件,并取名为 Profile
  • 使用 默认导入 的方式,从 Gallery.js 中导入 Gallery 组件。
  • 使用 默认导出 的方式,将根组件 App 导出。
相关文章
|
存储 缓存 算法
哈希函数:保护数据完整性的关键
哈希函数:保护数据完整性的关键
|
9月前
|
人工智能 数据可视化 数据库
低代码平台:技术复杂性的系统简化
低代码平台通过模块化和自动化技术,简化了传统开发流程中的需求分析、代码开发、测试部署等环节,显著提高了开发效率和协作能力。其核心特性如“一键编程”、“快速迭代”降低了开发复杂度,提供了敏捷开发的能力,使企业能更快响应市场需求和技术变革。可视化开发、实时渲染、分布式协作支持及无缝部署等功能进一步优化了开发体验。平台内置的五大核心引擎(SQL、功能、模板、图表、切面)进行了系统性优化,提升了数据处理能力和开发灵活性。此外,低代码平台还融合了AI技术,提供了智能代码助手、自动优化和故障排查等功能,增强了开发效率和精度。
|
9月前
|
人工智能 数据可视化 开发者
FlowiseAI:34K Star!集成多种模型和100+组件的 LLM 应用低代码开发平台,拖拽组件轻松构建程序
FlowiseAI 是一款开源的低代码工具,通过拖拽可视化组件,用户可以快速构建自定义的 LLM 应用程序,支持多模型集成和记忆功能。
616 14
FlowiseAI:34K Star!集成多种模型和100+组件的 LLM 应用低代码开发平台,拖拽组件轻松构建程序
|
12月前
|
运维 Devops jenkins
DevOps实践:自动化部署与持续集成的实现之旅
本文旨在通过一个实际案例,向读者展示如何将DevOps理念融入日常工作中,实现自动化部署和持续集成。我们将从DevOps的基础概念出发,逐步深入到工具的选择、环境的搭建,以及流程的优化,最终实现一个简单而高效的自动化部署流程。文章不仅提供代码示例,更注重于实践中的思考和问题解决,帮助团队提高软件开发和运维的效率。
|
12月前
|
存储 自然语言处理 关系型数据库
MySQL 自定义变量并声明字符编码
MySQL 自定义变量并声明字符编码
379 1
|
JavaScript
vue + element UI 表单中内嵌自定义组件的表单校验触发方案
vue + element UI 表单中内嵌自定义组件的表单校验触发方案
397 5
|
12月前
|
API
Vite 中环境变量的配置方法
【10月更文挑战第10天】 Vite 中环境变量的配置方法
1246 2
|
小程序 前端开发
【微信小程序-原生开发】TDesign 实战模板——聊天气泡
【微信小程序-原生开发】TDesign 实战模板——聊天气泡
319 0
vue3 element-ui-plus Carousel 跑马灯 的使用 及 踩坑记录
本文介绍了在Vue 3中使用Element UI Plus的Carousel组件实现跑马灯效果的方法,并分享了在实现过程中遇到的常见问题和解决方案。
vue3 element-ui-plus Carousel 跑马灯 的使用 及 踩坑记录
|
开发工具 图形学 iOS开发
Unity与IOS⭐Unity接入IOS SDK的流程图
Unity与IOS⭐Unity接入IOS SDK的流程图