第十一章 React 封装自定义组件

一、专栏介绍 🌍🌍

欢迎加入本专栏!本专栏将引领您快速上手React,让我们一起放弃放弃的念头,开始学习之旅吧!我们将从搭建React项目开始,逐步深入讲解最核心的hooks,以及React路由、请求、组件封装以及UI(Ant Design)框架的使用。让我们一起掌握React,开启前端开发的全新篇章!

二、什么是自定义组件 🌎🌎

自定义组件是指根据应用需求,自定义的组件。它们可以是有状态的或无状态的,可以接受props并返回JSX或null,并且可以包含生命周期方法、refs、context等等。 自定义组件在React应用中非常常见,因为React的核心思想就是组件化。每一个React页面都是由一个或多个组件构成,组件是构建React应用程序的基石。它们可以封装可重用的UI组件,使代码更加模块化和可维护。 自定义组件可以有很多用途。例如,它们可以创建可重用的UI组件,如按钮、表单、布局等。同时,它们也可以用于封装复杂的业务逻辑,将复杂的业务逻辑抽象为可重用的组件,提高代码的可维护性和可重用性。此外,自定义组件还可以用于实现AOP(面向切面编程),将通用逻辑(如认证、日志)封装到单独的组件中,避免在各个角落重复编写代码。 总之,自定义组件是React中非常重要的概念,它们可以帮助开发者更好地组织和维护代码,提高开发效率和质量。

三、组件需求 🌏🌏

根据需求,需要定义一个组件,该组件根据viewMode属性的不同显示不同的状态。当viewMode为edit时,显示一个标题和输入框,表示编辑状态;当viewMode为view时,显示一个标题和一个内容,表示查看状态。此外,该组件还需要集成原生的input输入框,并具有自己的属性。

四、编写组件源码 🔮🔮

新建文件src/components/CustomInput.tsx

自定义组件首字母一定要大写并且使用驼峰命名方式

InputHTMLAttributes<HTMLInputElement>为input框原生的属性。

import React, { InputHTMLAttributes } from 'react';
import './CustomInput.scss';const CustomInput: React.FC<InputHTMLAttributes<HTMLInputElement> & {label: string | number; // 这里的意思label属性可以是一个字符串也可以是一个数字。viewMode?: 'view' | 'edit'; // 这里的意思是view属性只能是view或者edit字符串}
> = ({ label, viewMode = 'edit', ...props }) => {// view = 'edit' 表示默认值就是editif (viewMode === 'edit') {return (<><div className={'ts-custom-input edit'}><span>{label}:</span><input {...props} /></div></>);}return (<><div className={'ts-custom-input view'}><span className={'title'}>{label}:</span><span className={'content'}>{props.defaultValue}</span></div></>);
};export default CustomInput;

新建文件src/components/CustomInput.scss

.ts-custom-input {width: 100%;height: 26px;line-height: 26px;&.view {.title {color: black;}.content {color: #696767;}}
}

使用组件

import React from 'react';
import CustomInput from './components/CustomInput';function App() {return (<div className="App"><CustomInputlabel="姓名"placeholder="请输入值"viewMode={'edit'}defaultValue={'我是默认值'}onChange={(e) => {console.log('👉👉👉-----------------输入值发生了变化,现在是:', e.target.value);}}/><CustomInput label="姓名" viewMode={'view'} defaultValue={'我是默认值'} /></div>);
}export default App;

效果

五、总结 💿💿

React中自定义组件非常重要、很有必要花时间好好的学学。

自定义组件可以将UI切分成一些独立的、可复用的部件,这样只需专注于构建每一个单独的部件,从而在多个项目中重用代码。这提高了开发效率,降低了维护成本。

组件化开发降低了系统各个功能之间的耦合性,提高了功能内部的聚合性。这使得代码更容易理解和修改,降低了开发复杂度。

自定义组件遵循一定的命名和规范,使得代码更加清晰和易于维护。当需要修改或扩展功能时,只需找到对应的组件进行修改,而不需要在整个项目中搜索和修改相关代码。

自定义组件使得团队成员可以更容易地分工合作,每人负责一个或多个组件的开发和维护。这提高了团队的协作效率,降低了沟通成本。

自定义组件可以接受不同的属性和参数,根据需求进行定制。这使得组件具有很高的灵活性,可以适应各种场景和需求。

自定义组件可以独立地进行测试和调试,这使得问题定位和修复更加容易。同时,组件的独立性也使得自动化测试更加容易实现。

总之,React中自定义组件的重要性在于它们提供了代码重用、降低耦合性、提升可维护性、更好的团队协作、灵活性和易于测试和调试等好处,从而提高了开发效率和质量。

👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇

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

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

相关文章

【NLP】RAG 应用中的调优策略

​ 检索增强生成应用程序的调优策略 没有一种放之四海而皆准的算法能够最好地解决所有问题。 本文通过数据科学家的视角审视检索增强生成&#xff08;RAG&#xff09;管道。它讨论了您可以尝试提高 RAG 管道性能的潜在“超参数”。与深度学习中的实验类似&#xff0c;例如&am…

关于jinja2高版本api变化导致notebook导出html失败的问题

最新jinja2版本已经到了3.1.2&#xff0c;但是nbconvert引用的应该是老版本&#xff0c;具体代码报错如下 Type "help", "copyright", "credits" or "license" for more information. >>> import nbconvert Traceback (most…

spark从表中采样(随机选取)一定数量的行

在Spark SQL中&#xff0c;你可以使用TABLESAMPLE来按行数对表进行采样。以下是使用TABLESAMPLE的示例&#xff1a; SELECT * FROM table_name TABLESAMPLE (1000 ROWS);在这个示例中&#xff0c;table_name是你要查询的表名。TABLESAMPLE子句后面的(1000 ROWS)表示采样的行数…

axios 基础的 一次封装 二次封装

一、平常axios的请求发送方式 修改起来麻烦的一批 代码一大串 二、axios的一次封装 我们会在src/utils创建一个request.js的文件来存放我们的基地址与拦截器 /* 封装axios用于发送请求 */ import axios from axios/* (1)request 相当于 Axios 的实例对象 (2)为什么要有reque…

VSCode使用Remote-SSH连接服务器时报错:无法与“***”建立连接: XHR failed.

关于VSCode的报错问题&#xff1a;无法与“***”建立连接: XHR failed 问题描述问题理解解决方法手动在本地下载安装包&#xff0c;然后手动传到服务器端 问题描述 是的&#xff0c;我又踩坑了&#xff0c;而且这个弄了好久&#xff0c;也重新装了VSCode软件&#xff0c;好像结…

2024黑龙江省职业院校技能大赛暨国赛选拔赛“GZ031应用软件系统开发”赛项赛题题库

2024黑龙江省职业院校技能大赛暨国赛选拔赛 “GZ031应用软件系统开发”赛项赛题题库 2024黑龙江省职业院校技能大赛暨国赛选拔赛 应用软件系统开发赛项&#xff08;高职组&#xff09; 赛题第1套 目录 竞赛说明 模块一&#xff1a;系统需求分析 任务1&#xff1a;制造执行…

Kotlin之for循环的具体使用说明

我们用java进行Android开发过程中&#xff0c;经常会用到for循环&#xff0c;在Kotlin中也会经常用到&#xff0c;但是在最近使用Kotlin中我发现&#xff0c;在java中使用for循环不会有什么问题&#xff0c;但是在Kotlin中会出现问题&#xff0c;就是循环出出来的结果不一样&am…

前端框架(Front-end Framework)和库(Library)的区别

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

阿里云国际版CDN加速,如何判断网站IP已加速?

将源站接入阿里云CDN服务后&#xff0c;您可以通过IP检测功能&#xff0c;检测客户端请求实际访问的IP是否为CDN加速节点IP&#xff0c;判断加速是否生效。 应用场景 IP检测的应用场景如下&#xff1a; 场景一&#xff1a;成功配置CDN后&#xff0c;您可以检测客户端请求实际…

Android popupwindow在低版本手机上无法显示

所以我开始看各个参数&#xff0c;注意到了在我自定义popupwindow的builder下的&#xff1a;&#x1f447;&#x1f447; .showAsDropDown(mLinMain, 0, 0);就是这个&#xff0c;这时候我想到了屏幕的原点坐标是&#xff08;0&#xff0c; 0&#xff09;&#xff0c;所设置的p…

Postman高级应用——变量、流程控制、调试、公共函数、外部数据文件

Postman 提供了四种类型的变量 环境变量&#xff08;Environment Variable&#xff09; 不同的环境&#xff0c;使用不同的环境变量&#xff0c;例如&#xff1a;测试过程中经常会用到 测试环境&#xff0c;外网环境等 全局变量&#xff08;Global Variable&#xff09; 所有的…

12.使用 Redis 优化登陆模块

目录 1. 使用 Redis 优化登陆模块 1.1 使用 Redis 存储验证码 1.2 使用 Redis 存储登录凭证 1.3 使用 Redis 缓存用户信息 1. 使用 Redis 优化登陆模块 使用 Redis 存储验证码&#xff1a;验证码需要频繁的访问与刷新&#xff0c;对性能要求较高&#xff1b;验证码不需要永…

【计算机网络】序列化,反序列化和初识协议

目录 ​编辑 一、概念 二、 序列化过程&#xff1a; 选择序列化格式&#xff1a; 实现序列化代码&#xff1a; JSON示例&#xff1a; Protocol Buffers示例&#xff1a; JSON编码示例&#xff1a; 传输或存储&#xff1a; 三、反序列化过程&#xff1a; 下面是反序列…

web前端之中文输入法导致的高频事件、addEventListener、compositionstart、compositionend

MENU 代码compositionendcompositionstartaddEventListener 代码 html <input type"text" />JavaScript var inp document.querySelector(input); let isComposing false;function search() {if (isComposing) return false;console.log(搜索: , inp.valu…

(企业 / 公司项目) 企业项目如何使用jwt?

按照企业的项目然后写的小demo&#xff0c; 自己搞一个登录接口然后调用jwtUtil工具类 后端实现 创建一个通用模块common来实现jwt生成token 登录注册的基本实现逻辑思路 面试| ProcessOn免费在线作图,在线流程图,在线思维导图 注释挺详细的jwtUtil工具类&#xff0c; 封装的…

WPF仿网易云搭建笔记(5):信息流控制之IOC容器

文章目录 专栏和Gitee仓库前言IOC容器Prism IOC使用声明两个测试的服务类MainWindow IOC 注入[单例]MainWindow里面获取UserController无法使用官方解决方案 使用自定义IOC容器&#xff0c;完美解决既然Prism不好用&#xff0c;直接上微软的IOC解决方案App.xaml.csViewModel里面…

网络测试工具:tcping-测试端口连接

网络测试工具&#xff1a;tcping-测试端口连接 平常使用的ping&#xff0c;是通过icmp协议去测试网络连通性的&#xff0c;tcping是通过tcp三次握手测试端口的连通性。总的来说&#xff0c;ping测试的是L3的连通性&#xff0c;tcping测试的是L4的连通性。 tcping工具下载 htt…

10.RIP路由信息协议

10.RIP 网段经常产生变化的话&#xff0c;建议使用动态路由协议&#xff0c;当网段发生变化的时候会自动通告给其他路由器 它不看链路的带宽&#xff0c;只看链路中的跳数&#xff0c;只要是跳数多的&#xff0c;不管带宽有多大&#xff0c;它就认为是不好的 RIP跳数有限 …

java中LinkedList和List继承有什么区别?

在Java中&#xff0c;LinkedList 和 List 是两个不同的概念。List 是一个接口&#xff0c;而 LinkedList 是实现了 List 接口的一个具体类。 List 接口&#xff1a; List 是Java集合框架中的一个接口&#xff0c;它表示有序的集合&#xff0c;允许重复元素。List 接口继承自 C…

TYPE-C接口设备实现DRP+OTG功能芯片

随着USB-C接口的普及&#xff0c;欧盟的法律法规强制越来越多的设备开始采用这种接口。由于 USB-C接口的高效性和便携性&#xff0c;使各种设备之间的连接和数据传输变得非常方便快捷&#xff0c;它们不仅提供了强大的功能&#xff0c;还为我们的日常生活和工作带来了极大的便利…