快捷導(dǎo)航

React 封裝自定義組件的操作方法

更新時間：2023年12月13日 09:21:28 作者：Etc.End

React中自定義組件的重要性在于它們提供了代碼重用、降低耦合性、提升可維護(hù)性、更好的團(tuán)隊協(xié)作、靈活性和易于測試和調(diào)試等好處,從而提高了開發(fā)效率和質(zhì)量,這篇文章主要介紹了React 封裝自定義組件,需要的朋友可以參考下

一、專欄介紹 ????

本專欄將引領(lǐng)您快速上手React，讓我們一起放棄放棄的念頭，開始學(xué)習(xí)之旅吧！我們將從搭建React項目開始，逐步深入講解最核心的hooks，以及React路由、請求、組件封裝以及UI（Ant Design）框架的使用。讓我們一起掌握React，開啟前端開發(fā)的全新篇章！

二、什么是自定義組件 ????

自定義組件是指根據(jù)應(yīng)用需求，自定義的組件。它們可以是有狀態(tài)的或無狀態(tài)的，可以接受props并返回JSX或null，并且可以包含生命周期方法、refs、context等等。自定義組件在React應(yīng)用中非常常見，因為React的核心思想就是組件化。每一個React頁面都是由一個或多個組件構(gòu)成，組件是構(gòu)建React應(yīng)用程序的基石。它們可以封裝可重用的UI組件，使代碼更加模塊化和可維護(hù)。自定義組件可以有很多用途。例如，它們可以創(chuàng)建可重用的UI組件，如按鈕、表單、布局等。同時，它們也可以用于封裝復(fù)雜的業(yè)務(wù)邏輯，將復(fù)雜的業(yè)務(wù)邏輯抽象為可重用的組件，提高代碼的可維護(hù)性和可重用性。此外，自定義組件還可以用于實現(xiàn)AOP（面向切面編程），將通用邏輯（如認(rèn)證、日志）封裝到單獨的組件中，避免在各個角落重復(fù)編寫代碼。總之，自定義組件是React中非常重要的概念，它們可以幫助開發(fā)者更好地組織和維護(hù)代碼，提高開發(fā)效率和質(zhì)量。

三、組件需求 ????

根據(jù)需求，需要定義一個組件，該組件根據(jù)viewMode屬性的不同顯示不同的狀態(tài)。當(dāng)viewMode為edit時，顯示一個標(biāo)題和輸入框，表示編輯狀態(tài)；當(dāng)viewMode為view時，顯示一個標(biāo)題和一個內(nèi)容，表示查看狀態(tài)。此外，該組件還需要集成原生的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屬性可以是一個字符串也可以是一個數(shù)字。
    viewMode?: 'view' | 'edit'; // 這里的意思是view屬性只能是view或者edit字符串
  }
> = ({ label, viewMode = 'edit', ...props }) => {
  // view = 'edit' 表示默認(rèn)值就是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={'我是默認(rèn)值'}
        onChange={(e) => {
          console.log('??????-----------------輸入值發(fā)生了變化，現(xiàn)在是：', e.target.value);
        }}
      />
      <CustomInput label="姓名" viewMode={'view'} defaultValue={'我是默認(rèn)值'} />
    </div>
  );
}
export default App;

效果