React组件封装

已于 2024-08-23 11:23:05 修改
阅读量199 收藏 1
点赞数 2
文章标签： react.js javascript 前端 html es6 reactjs
于 2024-08-06 10:26:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61874034/article/details/140945482
版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言

react组件封装

一、基础组件封装

1.1.Input

import { Input, message } from "antd";

const DeliveryInput = ({
  value,
  onChange,
  maxNum,
  item,
  handleOrderList,
}: any) => {
  const [messageApi, contextHolder] = message.useMessage();
  const handleChange = (e: any) => {
    const inputValue = e.target.value;
    if (/^[1-9][0-9]*$/.test(inputValue) && inputValue.length <= 4) {
      if (maxNum) {
        if (Number(inputValue) > maxNum) {
          messageApi.warning("已经是最大值了！");
        } else {
          onChange(Number(inputValue));
          handleOrderList &&
            handleOrderList(
              item.dataIndex,
              item.entity?.itemId,
              inputValue,
              item.entity,
            );
        }
      } else {
        onChange(Number(inputValue));
        handleOrderList &&
          handleOrderList(
            item.dataIndex,
            item.entity?.itemId,
            inputValue,
            item.entity,
          );
      }
    } else if (inputValue === "") {
      onChange("");
      handleOrderList &&
        handleOrderList(
          item.dataIndex,
          item.entity?.itemId,
          inputValue,
          item.entity,
        );
    }
  };
  return (
    <>
      {contextHolder}
      <Input
        style={{
          width: "100%",
          height: "100%",
          color: "#F29D39",
        }}
        type="number"
        value={value}
        onChange={handleChange}
        placeholder={"请输入货期"}
      />
    </>
  );
};

export default DeliveryInput;

1.2.Loading

import { styled } from "@umijs/max";
import { Spin } from "antd";
import React from "react";

const LoadingBox = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  zindex: 999;
  .content {
    padding: 50px;
    background: rgba(0, 0, 0, 0);
    border-radius: 4px;
  }
`;

interface ILoading {
  size?: "small" | "default" | "large";
  spinning?: boolean;
  boxStyle?: React.CSSProperties | undefined;
  loadingText?: string;
}
/**
 *
 * @param size loading大小, small default large
 * @param spinning 是否为加载中状态
 * @param boxStyle 容器自定义样式
 * @param loadingText 加载提示文本
 */

const Loading: React.FC<ILoading> = ({
  size,
  spinning,
  boxStyle,
  loadingText,
}): React.ReactElement => {
  return (
    <LoadingBox style={boxStyle}>
      <Spin spinning={spinning} size={size} tip={loadingText}>
        {spinning ? <div className="content" /> : <></>}
      </Spin>
    </LoadingBox>
  );
};
export default Loading;

1.3.Upload(图片限制，可选裁切)

import { PlusOutlined } from "@ant-design/icons";
import type { UploadFile, UploadProps } from "antd";
import { Image as ImageAntd, Upload, message } from "antd";
import ImgCrop from "antd-img-crop";
import { RcFile } from "antd/es/upload";
import { useState } from "react";
const getBase64 = (img: RcFile, callback: (url: string) => void) => {
  const reader = new FileReader();
  reader.addEventListener("load", () => callback(reader.result as string));
  reader.readAsDataURL(img);
};

const base64ToBlob = (url: any, imageType: string | undefined) => {
  const arr = url.split(",");
  const bstr = atob(arr[1]);
  let n = bstr.length;
  const u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], { type: imageType });
};

/**
 *
 * @param setFileFormData 设置接口FormData数据
 * @param setBase64ToBlobObj 设置接口FormData的图片参数setBase64ToBlob及fileName
 * @param fileList 接口返回的图片列表
 * @param uploadButtonText 上传按钮文字
 * @param restrictWidth 宽度限制
 * @param restricHeight 高度限制
 * @param type formData自命名图片名字前缀
 * @param size 图片大小限制
 * @param aspectWidth 图片裁剪比例宽度设置
 * @param sizeHeight 图片裁剪比例高度设置
 */

const UploadImage = ({
  setFileFormData,
  setBase64ToBlobObj,
  id,
  fileList: fileListArr,
  uploadButtonText,
  restrictWidth,
  restricHeight,
  type,
  size,
  aspectWidth,
  sizeHeight,
}: any) => {
  const [messageApi, contextHolder] = message.useMessage();
  const [previewOpen, setPreviewOpen] = useState(false);
  const [previewImage, setPreviewImage] = useState("");
  const [fileList, setFileList] = useState<UploadFile[]>(fileListArr || []);

  const validateImageSize = (file: File) => {
    return new Promise((resolve, reject) => {
      getBase64(file as RcFile, async (url) => {
        const image = new Image();
        image.onload = () => {
          const { width, height } = image;
          if (width === restrictWidth && height === restricHeight) {
            resolve(true);
          } else {
            messageApi.error("图片尺寸不符合要求，请重新上传");
            resolve(false);
          }
        };
        image.onerror = reject;
        image.src = url;
      });
    });
  };

  // 限制图片
  const beforeUpload: any = async (file: RcFile) => {
    const isJpgOrPng = file.type === "image/jpeg" || file.type === "image/png";
    if (!isJpgOrPng) {
      messageApi.error("请上传JPG/PNG图片!");
    }
    const isLtSizeMB = file.size / 1024 / 1024 < (size || 6);
    if (!isLtSizeMB) {
      messageApi.error(`请上传大小为${size || 6}MB以内的图片!`);
    }
    if (restrictWidth || restricHeight) {
      return isJpgOrPng && isLtSizeMB;
    } else {
      const limitSize = await validateImageSize(file);
      return isJpgOrPng && isLtSizeMB && limitSize;
    }
  };

  const handleChange: UploadProps["onChange"] = (info) => {
    if (info.file?.originFileObj) {
      setFileList(info.fileList);
      getBase64(info.file.originFileObj as RcFile, async (url) => {
        setPreviewImage(url);
        const formData = new FormData();
        if (id) formData.append("id", id);
        formData.append(
          type,
          base64ToBlob(url, info.file.type),
          `${type}—` + Date.now() + "." + info.file.type?.split("/")[1],
        );
        setFileFormData?.(formData);
        setBase64ToBlobObj?.({
          base64ToBlob: base64ToBlob(url, info.file.type),
          fileName:
            `${type}—` + Date.now() + "." + info.file.type?.split("/")[1],
        });
      });
    }
  };

  const handlePreview = async () => {
    if (fileList?.[0]?.url) {
      setPreviewImage(fileList?.[0]?.url);
    }
    setPreviewOpen(true);
  };

  const uploadButton = (
    <button style={{ border: 0, background: "none" }} type="button">
      <PlusOutlined />
      <div style={{ marginTop: 8, fontWeight: 400 }}>
        {uploadButtonText || "上传LOGO"}
      </div>
    </button>
  );

  return (
    <>
      {contextHolder}
      <ImgCrop
        rotationSlider
        // aspectSlider  // 图片旋转
        aspect={aspectWidth || 1 / sizeHeight || 1}
      >
        <Upload
          name="avatar"
          listType="picture-card"
          className="avatar-uploader"
          fileList={fileList}
          action="/upload.do"
          beforeUpload={beforeUpload}
          onChange={handleChange}
          onPreview={handlePreview}
          onRemove={() => {
            setBase64ToBlobObj?.(null);
            setFileFormData?.(null);
            setFileList([]);
            setPreviewImage("");
          }}
        >
          {fileList.length >= 1 ? null : uploadButton}
        </Upload>
      </ImgCrop>
      {previewImage && (
        <ImageAntd
          wrapperStyle={{ display: "none" }}
          preview={{
            visible: previewOpen,
            onVisibleChange: (visible) => setPreviewOpen(visible),
            // afterOpenChange: (visible) => !visible && setPreviewImage(""),
          }}
          src={previewImage}
        />
      )}
    </>
  );
};

export default UploadImage;

总结

以上就是今天要讲的内容，本文主要记录开发常用的React封装的组件。
愿：平安顺遂！

Lin=>Jingbei
关注
react组件封装
CSDNchaxundaima的博客
03-30 342
以一个form表单为例，我们现在要封装一个表单 这个表单代码如下： import React, { Component } from 'react' export default class formitem extends Component { constructor(props){ super(props) } render() { return ( <div> <for
react 组件封装原则_如何基于antd封装自己的react组件并发布到npm
weixin_29264201的博客
01-14 1027
引言在前端项目开发过程中，有大量重复的内容，比如布局相似的模块，较多的功能表单等，我们可以提炼成组件来提升效率，减少重复建设。文章以实际工作中的项目为例，介绍如何将项目中常用的组件进行封装并发布到npm中。1 前提要求在开始前你需要具备以下条件：安装了Node & npm安装了Git基本掌握npm ，git使用方法熟练使用 JavaScript & ES6 & CSS基本掌...
React的组件封装
Bokk的博客
02-03 1617
目录前言一、需求分析二、实现细节2.1 新加的功能2.2 增强的方法 前言 最近开始学习React，跟着Nolan老师开发Jira，有很多干货，这里分享一个组件组件封装的方法。 一、需求分析 在antd的Select组件中， value 可以传入多种类型的值 onChange只会回调 number|undefined 类型 当 isNaN(Number(value)) 为true的时候，也就是vaule不能转换成number的时候，代表选择默认类型，就是string 当选择默认类型的时候，onChange
React封装组件（Button按钮和Modal模态框）
欢迎
12-01 2269
React封装组件（Button按钮和Modal模态框）
React组件的封装
m0_46527751的博客
07-04 2517
使用 模态框 首先定义一个模态框组件的类，关于模态框内部的样式布局我们在这里面写 在父组件中定义控制模态框状态的，以及我们模态框中的标题内容等，在父组件中引入模态框组件时把模态框中需要的内容传入 在父组件中定义控制模态框显示状态的方法，如打开模态框，关闭模态框等，将关闭模态框的函数也传入子组件，在子组件中取消和关闭等组件的点击事件绑定我们传入的关闭模态框函数，实现模态框的打开和关闭 实现模态框打开关闭的过渡动画效果 全部CSS代码 模态框组件代码 主界面...
【REACT-组件封装1】
limuzhixing的博客
02-23 391
REACT-组件封装1
react组件封装模糊输入下拉
12-25
前端开发
business-component:react组件封装，基于antd二次封装的业务组件，主要为表单，表格，model弹窗
05-06
react 常用组件API调用的模块化封装 项目启动 npm install npm run server npm run build 发布 npm install webpack-cli --save-dev 配置环境变量 cross-env 项目介绍 工作中发现我们在做react后台管理系统的时候，...
把react组件封装成JS对象
09-07 1252
aotoo aotoo是一个react的封装库，将react组件js实例化，方便组件间通信 GITHUB源码 INSTALL yarn add @aotoo/aotoo # npm install @aotoo/aotoo USAGE 1 将原生React组件封装成JS对象 import createComponent from '@aotoo/aotoo' class Test extends React.Component { render(){ return ( <d
react-一个简单的甘特图React组件封装
08-15
在这个场景下，我们将讨论如何封装一个简单的甘特图React组件，并探讨相关的React技术和图表绘制策略。 首先，让我们了解React组件的基本概念。React组件是可重用的代码块，它们像JavaScript函数一样接收任意输入...
React Form组件的实现封装杂谈
12-01
前言 对于网页系统来说，表单提交是一种很常见的与用户交互的方式，比如提交订单的时候，需要输入收件人、手机号、地址等信息，又或者对系统进行设置的时候，需要填写一些个人偏好的信息。 表单提交是一种结构化的操作，可以通过封装一些通用的功能达到简化开发的目的。本文将讨论Form表单组件设计的思路，并结合有赞的ZentForm组件介绍具体的实现方式。本文所涉及的代码都是基于React v15的版本。 Form组件功能 一般来说，Form组件的功能包括以下几点： 表单布局 表单字段 封装表单验证&错误提示 表单提交 下面将对每个部分的实现方式做详细介绍。 表单布局 常用的表单布局一般有3种
React 计时器案例(模块化_组件封装)
05-09
http://blog.csdn.net/liudao7994/article/details/71480235 有图
React——创建组件和封装组件
wukeyan的博客
04-19 730
第一种创建组件的方式：函数组件 import React from 'react' import ReactDOM from 'react-dom' const cat = { name:'Kitty', age:2, gender:'雌' } function Hello(props){ //组件名称首字母必须大写,注意这个props是只读的，不能被重新赋值，这点和vue一样 return ( <> <div>我是一个hello函数组件 ---{props.name}
组件化开发之如何封装组件---react
最新发布
A1_wang的博客
07-19 935
在React中，组件是构造用户界面的基本单位。组件可以理解为一个独立且可复用的代码单元。它封装了特定的功能和UI呈现。React应用程序是由多个组件构成的，这些组件可以嵌套在一起形成复杂的UI结构。俗话：当谈论组件时，就像在搭积木一样，每个组件都是一个独立的、可以重复使用的代码块，用来构建网页或应用的各个部分。比如界面的布局，像按钮、文本输入框这样的东西。
组件化开发之如何封装组件-react
ccirclee的博客
08-26 2082
组件是构建用户界面的基本单元，它是一个独立的、可重用的、可组合的代码单元，用于表示UI的一部分。人话：当谈论组件时，就像在搭积木一样，每个组件都是一个独立的、可以重复使用的代码块，用来构建网页或应用的各个部分。比如界面的布局，像按钮、文本输入框这样的东西。
React—组件封装
Poppy_LYT的博客
09-06 391
React—组件封装 1、新建文件夹 src=》component=〉nav文件夹=》nav.js 2、nav.js import React, {Component} from 'react'; export default class Nav extends Component { render () { return ( <div cla...
React组件封装集合
weixin_34124939的博客
11-01 826
前言 一直以来，都是在项目中将公共React组件放在Common之类的文件夹，今天抽时间把以前博客介绍过的几个React组件抽象出来，挂载到npm上，提供下载安装。 React组件集合列表 下面列举的React组件都可以点击链接去github下载使用，具体安装教程看readme文档。 1、lazy-load-component 提供webpack异步加载React组件的高阶函数。 如果你的rea...
react 组件 封装成hook
05-24
将 React 组件封装成 Hook 可以让我们更方便地在函数组件中复用组件逻辑。下面是一些封装组件为 Hook 的示例代码： 1. 使用 useState 封装计数器组件： ```javascript import { useState } from 'react'; const useCounter = (initialCount = 0, step = 1) => { const [count, setCount] = useState(initialCount); const increment = () => setCount(count + step); const decrement = () => setCount(count - step); return { count, increment, decrement }; }; export default useCounter; ``` 使用示例： ```javascript import useCounter from './useCounter'; function Counter() { const { count, increment, decrement } = useCounter(); return ( <> <p>Count: {count}</p> <button onClick={increment}>+</button> <button onClick={decrement}>-</button> </> ); } ``` 2. 使用 useEffect 封装鼠标位置跟踪组件： ```javascript import { useState, useEffect } from 'react'; const useMousePosition = () => { const [position, setPosition] = useState({ x: 0, y: 0 }); useEffect(() => { const updateMousePosition = (event) => { setPosition({ x: event.clientX, y: event.clientY }); }; document.addEventListener('mousemove', updateMousePosition); return () => { document.removeEventListener('mousemove', updateMousePosition); }; }, []); return position; }; export default useMousePosition; ``` 使用示例： ```javascript import useMousePosition from './useMousePosition'; function MouseTracker() { const { x, y } = useMousePosition(); return ( <p> Mouse position: {x}, {y} </p> ); } ``` 以上是两个简单的示例，通过封装 React 组件为 Hook，可以让我们更好地复用组件逻辑并在函数组件中使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值