第十一章 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' 表示默认值就是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;

效果