今天刚刚运用antd做了个分页，根据官网上的指导和一些自己的摸索，将其完成，有些代码编写的还是比较繁琐，没有做简化。antd官网讲的还是比较详细的，有案例，本例在其基础上扩展了一下功能，现将其按照例子的方式记录下来，以供以后参考。 先将显示出来的效果放出来（注：本次案例是点击一次页码请求一页数据）： 编码过程大体需要以下几步：1.初始化必要属性，如数据 data，数据条数 co
转载
2024-06-19 15:21:37
854阅读
import router from '@ohos.router'import { Choice } from '../view/ChoicePage';import { Home } from '../view/HomePage';import
在写Tabs时，会使用很多个TabContent来实现不同页面的展示内容，但是如果TabContent数量很多时，会导致Tabs代码量大而且很臃肿，因此想着尝试去封装Tabs的使用，可以让界面整洁和对内容界面的解耦。
主要依托于wrapBuilder：封装全局@Builder的方法使用。需要注意从API 11 才开始支持使用
目录前言导语父子组件调用父组件第一步第二步子组件 数据演示功能要点 1 演示效果 功能要点2 演示效果 功能要点3 演示结果总结父子组件调用首先我们看一下父子组件的一个调用父组件第一步import ButtonGroup from './Common/ButtonGroup/index.js';第二步<ButtonGroup bu
转载
2023-11-30 15:48:57
0阅读
在写Tabs时，会使用很多个TabContent来实现不同页面的展示内容，但是如果TabContent数量很多时，会导致Tabs代码量大而且很臃肿
jQuery是Web开发人员和设计人员中最受欢迎的JavaScript库之一。 而且，每天都会创建许多效果惊人的新插件。 开发人员和用户倾向于尽可能选择jQuery插件。 如果您仍然对jQuery不了解，本文将帮助您了解为什么它们如此受欢迎。 插件是一个独立的模块，可以向应用程序添加自定义功能。 启用或禁用插件不会影响核心系统或其他插件。 作为开发人员，我们倾向于寻求快速解决方案，而不是专注于
转载
2024-08-13 13:25:49
41阅读
RN 与native 的交互0>>> React 的渲染機制1>>> react-native 渲染原理 2>>> react-native 如何与原生通信3>>> 如何封装一个原生视图组件4>>> react-native 的线程管理 RN的本质是利用 js 调用 native 端的组件
1、react组件封装封装组件分三类：封装普通展示类组件 通过函数组件实现，不带生命周期，不带state封装纯逻辑类组件 通过组件的生命周期来做判断，给传入的组件加上一些附加属性或逻辑操作或props封装通用业务组件 上述两种组合，组件本身可完成独立的通用业务。可组合、可维护、可重用 一个设计良好的组件应该有什么特性？ 高内聚低耦合 在封装一组组件时候应该思考什么？ 组件应该是做什么的 组件至少应
转载
2023-11-07 06:40:30
119阅读
React笔记(五)1.组件化React应用采用基于组件的架构方式，也就是说可以将一个复杂的页面分解成一个个较简单的组件来实现。但组件在开发时，常常会遇到一些问题，比如为单一组件赋予了过多的指责。这在项目上是可行的，但如果需要修改现有功能，或者创建新功能，就大大增加了工作量。export default class Demoe extends Component {
state={
c
转载
2023-11-27 15:10:29
71阅读
原文的篇幅非常长，不过内容太过于吸引我，还是忍不住要翻译出来。此篇文章对编写可重用和可维护的React组件非常有帮助。但因为篇幅实在太长，我对文章进行了分割，本篇文章重点阐述 封装。因本人水平有限，文中部分翻译可能不够准确，如果您有更好的想法，欢迎在评论区指出。———————————————我是一条分割线————————————————封装一个封装组件提供 props 控制其行为而不是暴露其内部结
转载
2024-03-12 16:23:28
51阅读
前言用React15写的，选项是静态数据，为了适应原来的代码，加了很多复杂的东西 - 。-，不过也算学了点新东西，记录一下。效果展示结构分析数据结构constructor(props) {
super(props)
const { value, dataList } = props // 获取传过来的当前选中值和选项列表---[[value:label],[value:l
转载
2023-11-29 07:03:48
130阅读
接触React也有一段时间了，从刚开始jquery式地去使用React，到慢慢走上正轨，还是经过了不少学习的。从开发过程中，遇到的组件大概有两类：UI类、工具类。UI类顾名思义就是能看得到的UI，这些组件一般就是按照需要渲染成相应的样子。工具类是一类虽然看上去好像什么东西都不渲染，但是却需要写在render中作为组件加载才能使用。（无法通过传统对象或者类方法之类实现）作为一个组件，一般来说就是纯粹
转载
2024-01-26 09:20:47
89阅读
前言随着vue/react这类以数据驱动为主的web框架的不断完善和壮大，越来越多的前端团队开始着手搭建内部的组件库。虽然目前市面上已经有很多功能强大且完善的组件库供我们使用，比如基于react的开源组件库ant-design，material，又比如基于vue的开源组件库elementUI，iView等。 我们在开发管理系统或者中台产品时，完全可以使用这种第三方库来开发，因为首先其服务的用户
前言 这里写一下如何封装可复用组件。首先技术栈 react hooks + prop-types + jsx封装纯函数组件。类组件和typeScript在这不做讨论，大家别白跑一趟。 接下来会说一下封装可复用组件的思路，比如一个新手应该怎么去封装，都需要注意哪些东西。 然后说一些复杂组件需要的功能，比如闭合标签内部dom怎么处理，其实就是插槽
转载
2023-11-07 11:17:42
238阅读
思维导图什么是单一原则单一责任原则 SRP(Single responsibility principle) 是一种计算机编程原理，它规定每个模块或类应该对软件提供的单个功能负责。在 React 里单一责任原则要求组件改变时只有一个原因。React 组件使用单一责任原则时，当它改变时只会有一个原因，做一件事就会更简单。多责任陷阱直接编码，不划分结构写一个大组件，不划分组件对 callback、pr
转载
2024-02-01 20:12:41
121阅读
写这个系列文章的开始，我没有学过React，更没有写过一行React代码。前端的知识积累来源于多年的Javascript和Vue开发经验。基于对Ant Design Pro的“开箱即用”的信心，开始本次旅程。如果我这样的知识储备之下可以真正的“开箱即用”，那么这就是真正的“开箱即用”。代码编辑器选择基于多年使用习惯，选择Visual Code （点击链接下载）作为代码编辑器，以前用VsCode编写
转载
2024-03-16 16:49:59
48阅读
文章目录一、form表单封装之树形选择框封装1. 代码结构（1）html代码（2）树形选择框的结构（3）css（4）转化函数2. 使用方法（1）单独使用（2）和form表单一起使用二、form表单之时间范围选择器封装1. 代码（1）html代码2. 使用方法（1）单独使用（2）在form表单中使用三、form表单封装1. 代码（1）html（2）数据结构（3）css2. 使用方法（1）导入该组件
转载
2023-11-09 16:30:16
80阅读
今天我们来介绍一下React中，对Echarts的一个简单的封装。首先在我们的React项目中，想使用Echart包，首先需要先安装它，安装代码如下，任选一个就可以cnpm install echarts --save
npm install echarts --save
yarn add echarts --save安装好之后，新建一个JS文件，命名test.js，首先导入的是各种依赖（总代码在
转载
2024-05-18 06:53:42
193阅读
最近参与了一个基于Raact技术栈的项目，距离我上一次在工作中react已经过去了挺长一段时间，因此打算整理在react中封装组件的一些方法。1、extends 正向继承对于类组件而言，可以通过extends继承某个父类，从而获得一些公共的能力class LogPage extends React.Component { trackLog() { console.log("tr
转载
2024-06-06 05:55:21
110阅读
第一种创建组件的方式：函数组件函数组件是简单组件，因为他没有状态（hooks 出现之前）import React from 'react'
import ReactDOM from 'react-dom'
const cat = {
name:'Kitty',
age:2,
gender:'雌'
}
function Hello(props){ //组件名称首字母必须大写,注意这个 pr
转载
2024-04-08 20:48:36
94阅读
