react组件的导入与导出

组件的神奇之处在于它们的可重用性:你可以创建一个由其他组件构成的组件。但当你嵌套了越来越多的组件时,则需要将它们拆分成不同的文件。这样可以使得查找文件更加容易,并且能在更多地方复用这些组件。

根组件文件 

在 你的第一个组件 中,你创建了一个 Profile 组件,并且渲染在 Gallery 组件里。

function Profile() {return (<imgsrc="https://i.imgur.com/MK3eW3As.jpg"alt="Katherine Johnson"/>);
}export default function Gallery() {return (<section><h1>了不起的科学家们</h1><Profile /><Profile /><Profile /></section>);
}

在此示例中,所有组件目前都定义在 根组件 App.js 文件中。具体还需根据项目配置决定,有些根组件可能会声明在其他文件中。如果你使用的框架基于文件进行路由,如 Next.js,那你每个页面的根组件都会不一样。

导出和导入一个组件 

如果将来需要在首页添加关于科学书籍的列表,亦或者需要将所有的资料信息移动到其他文件。这时将 Gallery 组件和 Profile 组件移出根组件文件会更加合理。这会使组件更加模块化,并且可在其他文件中复用。你可以根据以下三个步骤对组件进行拆分:

  1. 创建 一个新的 JS 文件来存放该组件。
  2. 导出 该文件中的函数组件(可以使用 默认导出 或 具名导出)
  3. 在需要使用该组件的文件中 导入(可以根据相应的导出方式使用 默认导入 或 具名导入)。

这里将 Profile 组件和 Gallery 组件,从 App.js 文件中移动到了 Gallery.js 文件中。修改后,即可在 App.js 中导入 Gallery.js 中的 Gallery 组件:

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

该示例中需要注意的是,如何将组件拆分成两个文件:

  1. Gallery.js:
    • 定义了 Profile 组件,该组件仅在该文件内使用,没有被导出。
    • 使用 默认导出 的方式,将 Gallery 组件导出
  2. App.js:
    • 使用 默认导入 的方式,从 Gallery.js 中导入 Gallery 组件。
    • 使用 默认导出 的方式,将根组件 App 导出。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/6799.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何进行Go语言的性能测试和调优?

文章目录 开篇一、性能测试1. 使用标准库中的testing包2. 使用第三方工具 二、性能调优1. 优化算法和数据结构2. 减少不必要的内存分配和垃圾回收3. 并发和并行 结尾 开篇 Go语言以其出色的性能和简洁的语法受到了广大开发者的喜爱。然而&#xff0c;在实际开发中&#xff0c;…

微服务架构与单体架构

微服务架构与与单体架构比较 微服务架构是一种将应用程序作为一组小的、独立服务的系统架构风格&#xff0c;每个服务运行在其自己的进程中&#xff0c;并通常围绕业务能力组织。这些服务通过定义良好且轻量级的机制&#xff08;通常是HTTP REST API&#xff09;进行通信。微服…

Redis(基础指令和五大数据类型)

文章目录 1.基本介绍1.多种数据结构支持2.应用场景 2.Redis安装&#xff08;直接安装到云服务器&#xff09;1.安装gcc1.yum安装gcc2.查看gcc版本 2.将redis6.2.6上传到/opt目录下3.进入/opt目录下然后解压4.进入 redis-6.2.6目录5.编译并安装6.进入 /usr/local/bin 查看是否有…

智慧文旅开启沉浸式文化体验,科技让旅行更生动:借助智慧技术,打造沉浸式文化体验场景,让旅行者在旅行中深度感受文化的魅力

一、引言 随着科技的飞速发展&#xff0c;传统旅游行业正经历着前所未有的变革。智慧文旅&#xff0c;作为一种新兴的旅游模式&#xff0c;正以其独特的魅力&#xff0c;吸引着越来越多的旅行者。智慧文旅不仅改变了人们的旅行方式&#xff0c;更在深度上丰富了人们的文化体验…

PostgreSQL 的用户管理操作

在 PostgreSQL 中,可以通过 SQL 命令和 psql 命令行工具进行用户管理操作。以下是一些常见的 PostgreSQL 用户管理操作: 1. 查询用户: \du2. 创建用户: 可以使用 CREATE ROLE 命令创建新用户,语法如下: CREATE ROLE username WITH LOGIN PASSWORD password; 如: CRE…

ansible报错解决:Failed to import the required Python library (netaddr)

ansible报错解决&#xff1a;Failed to import the required Python library (netaddr) 问题情况 今天我在做实验的时候出现了一个问题&#xff0c;以下是我的playbook&#xff0c;这个playbook是验证变量ip_address是否是一个合法的IP地址&#xff0c;并打印相应的信息的一个…

Spring入门及注解开发

1 引言 自定义注解可以用来为代码添加元数据信息,简化配置,提高代码的可读性和可维护性。通过自定义注解,可以实现自定义的业务逻辑、约束条件、配置参数等功能。在Spring中,自定义注解常用于标记组件、配置依赖注入、AOP切面等。 自定义注解可以添加元数据信息,低代码框…

问题 A: 实验11_4_初识链表

题目描述 已知一个正整数序列&#xff0c;个数未知&#xff0c;但至少有一个元素&#xff0c;你的任务是建立一个单链表&#xff0c;并使用该链表存储这个正整数序列&#xff0c;然后统计这个序列中元素的最大值与最小值&#xff0c;计算序列全部元素之和。正整数的输入用-1作…

关于图形库

文章目录 1. 概念介绍2. 使用方法2.1 普通路由2.2 命名路由 3. 示例代码4. 内容总结 我们在上一章回中介绍了"使用get显示Dialog"相关的内容&#xff0c;本章回中将介绍使用get进行路由管理.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 我们在本章…

AEC Capital Limited:开启可持续金融新纪元

在当今社会&#xff0c;环保和可持续发展已成为全球关注的焦点。在这个背景下&#xff0c;AEC Capital Limited作为香港的一家金融服务公司&#xff0c;以其专业、高端的服务和创新的理念&#xff0c;成为可持续金融领域的引领者。我们致力于将环境保护与金融服务相结合&#x…

muduo库的使用

目录 1、概述 2、基于muduo网络库开发服务器程序步骤 3、代码演示 1、概述 muduo网络库给用户提供了两个主要的类 TcpServer:用于编写服务器程序的TcpClient:用于编写客户端程序的 moduo库采用epoll线程池 好处&#xff1a;能够把网络I/O&#xff08; 用户的连接和断开 …

观测与预测差值自动变化系统噪声Q的自适应UKF(AUKF_Q)MATLAB编写

简述 基于三维模型的UKF&#xff0c;设计一段时间的输入状态误差较大&#xff0c;此时通过对比预测的状态值与观测值的残差&#xff0c;在相应的情况下自适应扩大系统方差Q&#xff0c;构成自适应无迹卡尔曼滤波&#xff08;AUKF&#xff09;&#xff0c;与传统的UKF相比&…

mac监听 linux服务器可视化(Grafana+Promethus+Node_exporter)

Grafana和promethus(普罗米修斯)的安装和使用 监控系统的Prometheus类似于一个注册中心&#xff0c;我们可以只需要配置一个Prometheus,而在其他服务器&#xff0c;只需要安装node_exporter,它们的数据流转就是通过exporter采集数据信息&#xff0c;然后告诉prometheus它的位置…

华为二层交换机与路由器连通上网实验

华为二层交换机与路由器连通上网实验 二层交换机是一种网络设备&#xff0c;用于在局域网&#xff08;LAN&#xff09;中转发数据帧。它工作在OSI模型的第二层&#xff0c;即数据链路层。二层交换机通过学习和维护MAC地址表&#xff0c;实现了数据的快速转发和广播域的隔离。 实…

汉译英早操练-(三十)

hello&#xff0c;汉语在表达成英语的时候你是否有困惑。不要着急&#xff0c;一起来看看需要我们注意一些什么&#xff0c;慢慢的就不恐惧用英语表达汉语这件事了。给大家奉献系列文章&#xff0c;供大家参考学习。 往期回顾在这里&#xff0c;请随便点击过去查看&#xff0c;…

SpringBoot:实战项目TLIAS智能学习辅助系统1.1

SpringBootWeb项目 TILAS智能学习辅助系统 需求 部门管理 查询部门列表 删除部门 新增部门 修改部门 员工管理 查询员工列表(分页) 删除员工 新增员工 修改员工 准备工作 导入依赖 web(2.7.6) mybatis mysql驱动 lombok 准备好包结构 Controller->Servi…

CGAL 网格简化

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 为了提高网格处理的效率,通常需要将过于冗长的3D数据集简化为更简洁而又真实的表示。尽管从几何压缩到逆向工程有许多应用,但简洁地捕捉表面的几何形状仍然是一项乏味的任务。CGAL中则为我们提供了一种通过变分几…

语言文学综合-隋唐五代文学

概说 &#xff08;一&#xff09;唐代社会、文化的发展和唐代文学的繁荣 &#xff08;二&#xff09;唐代文学的风貌及其在中国文学史上的地位 一、隋与初唐文学 &#xff08;一&#xff09;南北文学的合流与隋代诗歌 卢思道、薛道衡等是北齐、北周旧臣。薛道衡的《昔昔盐》…

Objective-C高级特性浅析与实践指南

OC的学习笔记&#xff08;二&#xff09; 文章目录 OC的学习笔记&#xff08;二&#xff09;property访问控制符点语法 自定义init方法内存管理retain 和 release class处理发生异常的方法NSSrting的常用方法类方法对象方法lengthcharacterAtIndexisEuqalStringcompare autorel…

基于LLama3、Langchain,Chroma 构建RAG

概要&#xff1a; 使用Llama3 Langchain和ChromaDB创建一个检索增强生成&#xff08;RAG&#xff09;系统。这将允许我们询问有关我们的文档&#xff08;未包含在训练数据中&#xff09;的问题&#xff0c;而无需对大型语言模型&#xff08;LLM&#xff09;进行微调。在使用RA…