第十一章 React 封装自定义组件-编程知识

第十一章 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;

效果