React 封装自定义组件的操作方法
作者：Etc.End
一、专栏介绍 🌍🌍
本专栏将引领您快速上手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' 表示默认值就是edit
if (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">
<CustomInput
label="姓名"
placeholder="请输入值"
viewMode={'edit'}
defaultValue={'我是默认值'}
onChange={(e) => {
console.log('👉👉👉-----------------输入值发生了变化，现在是：', e.target.value);
}}
/>
<CustomInput label="姓名" viewMode={'view'} defaultValue={'我是默认值'} />
</div>
);
}
export default App;效果
五、总结 💿💿
React中自定义组件非常重要、很有必要花时间好好的学学。
自定义组件可以将UI切分成一些独立的、可复用的部件，这样只需专注于构建每一个单独的部件，从而在多个项目中重用代码。这提高了开发效率，降低了维护成本。
组件化开发降低了系统各个功能之间的耦合性，提高了功能内部的聚合性。这使得代码更容易理解和修改，降低了开发复杂度。
自定义组件遵循一定的命名和规范，使得代码更加清晰和易于维护。当需要修改或扩展功能时，只需找到对应的组件进行修改，而不需要在整个项目中搜索和修改相关代码。
自定义组件使得团队成员可以更容易地分工合作，每人负责一个或多个组件的开发和维护。这提高了团队的协作效率，降低了沟通成本。
自定义组件可以接受不同的属性和参数，根据需求进行定制。这使得组件具有很高的灵活性，可以适应各种场景和需求。
自定义组件可以独立地进行测试和调试，这使得问题定位和修复更加容易。同时，组件的独立性也使得自动化测试更加容易实现。
总之，React中自定义组件的重要性在于它们提供了代码重用、降低耦合性、提升可维护性、更好的团队协作、灵活性和易于测试和调试等好处，从而提高了开发效率和质量。
到此这篇关于React 封装自定义组件的文章就介绍到这了,更多相关React 封装组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！