- 博客(86)
- 收藏
- 关注
RSS订阅原创 React 对state进行保留和重置
只要在相同位置渲染的是相同组件， React 就会保留状态。state 不会被保存在 JSX 标签里。它与你在树中放置该 JSX 的位置相关联。你可以通过为一个子树指定一个不同的 key 来重置它的 state。不要嵌套组件的定义，否则你会意外地导致 state 被重置。说明:文中例子参考React官方文档教程，不同的是这里使用TypeScript 来写,更详细的学习请移步React官方文档教程。
2025-04-17 11:21:10
859
原创 React 在组件间共享状态
当你想要整合两个组件时，将它们的 state 移动到共同的父组件中。然后在父组件中通过 props 把信息传递下去。最后，向下传递事件处理程序，以便子组件可以改变父组件的 state。考虑该将组件视为“受控”（由 prop 驱动）或是“不受控”（由 state 驱动）是十分有益的。
2025-04-15 16:36:16
953
1
原创 React 更新 state 中的数组
你可以把数组放入 state 中，但你不应该直接修改它。不要直接修改数组，而是创建它的一份 新的 拷贝，然后使用新的数组来更新它的状态。你可以使用 […arr, newItem] 这样的数组展开语法来向数组中添加元素。你可以使用 filter() 和 map() 来创建一个经过过滤或者变换的数组。你可以使用 Immer 来保持代码简洁。
2025-04-15 11:16:04
937
原创 React 更新state中的对象
你可以在 state 中存放任意类型的 JavaScript 值。setX(5);state x 从 0 变为 5，但是数字 0 本身并没有发生改变。在 JavaScript 中，无法对内置的原始值，如数字、字符串和布尔值，进行任何更改。从技术上来讲，可以改变对象自身的内容。然而，虽然严格来说 React state 中存放的对象是可变的，但你应该像处理数字、布尔值、字符串一样将它们视为不可变的。因此你应该替换它们的值，而不是对它们进行修改。
2025-04-14 16:21:37
1065
原创 React 把一系列 state 更新加入队列
如果你想在下次渲染之前多次更新同一个 state，你可以像 setNumber(n => n + 1) 这样传入一个根据队列中的前一个 state 计算下一个 state 的 函数，而不是像 setNumber(number + 1) 这样传入 下一个 state 值。因为每一次渲染的 state 值都是固定的，因此无论你调用多少次 setNumber(1)，在第一次渲染的事件处理函数内部的 number 值总是 0。setNumber(n => n + 1)：n => n + 1 是一个更新函数。
2025-04-14 14:10:37
860
原创 React State组件的记忆
当一个组件需要在多次渲染间“记住”某些信息时使用 state 变量。State 变量是通过调用useStateHook 来声明的。Hook 是以use开头的特殊函数。它们能让你 “hook” 到像 state 这样的 React 特性中。Hook 可能会让你想起 import：它们需要在非条件语句中调用。调用 Hook 时，包括useState，仅在组件或另一个 Hook 的顶层被调用才有效。useStateHook 返回一对值：当前 state 和更新它的函数。
2025-04-10 11:15:22
579
原创 React 响应事件
开发环境：React+ts+antd使用 React 可以在 JSX 中添加 事件处理函数。其中事件处理函数为自定义函数，它将在响应交互（如点击、悬停、表单输入框获得焦点等）时触发。学习内容1.编写事件处理函数的不同方法2.如何从父组件传递事件处理逻辑3.事件如何传播以及如何停止它们。
2025-04-09 12:14:44
859
原创 React 列表渲染
你可能经常需要通过 JavaScript 的数组方法 来操作数组中的数据，从而将一个数据集渲染成多个相似的组件。在这篇文章中，你将学会如何在 React 中使用 filter() 筛选需要渲染的组件和使用 map() 把数组转换成组件数组。1.如何通过 JavaScript 的 map() 方法从数组中生成组件2. 如何通过 JavaScript 的 filter()筛选需要渲染的组件3. 何时以及为何使用 React 中的 key。
2025-04-08 16:58:24
798
原创 React 条件渲染
JavaScript 会自动将左侧的值转换成布尔类型以判断条件成立与否。然而，如果左侧是 0，整个表达式将变成左侧的值（0），React 此时则会渲染 0 而不是不进行渲染。通常你的组件会需要根据不同的情况显示不同的内容。: 运算符来选择性地渲染 JSX。其原本是想当 messageCount 为 0 的时候不进行渲染，但实际上却渲染了 0。我们在满足 isPacked={true} 条件的物品清单旁加上一个勾选符号✔。为了更正，可以将左侧的值改成布尔类型：messageCount > 0 &&
2025-04-08 16:10:46
451
原创 React 组件prop传值
我们可以通过在 Avatar 之后直接列出它们的名字 person, size 来读取这些 props。这些 props 在 ({ 和 }) 之间，并由逗号分隔。这样，我们可以在 Avatar 的代码中使用它们，就像使用变量一样。将一些 props 传递给 Avatar。例如，让我们传递两个 props：person（一个对象）和 size（一个数字）当然我们也可以其他页面使用product页面里面的子组件Avatar。在需要使用的组件页面具名导入Avatar，让后传入对应的值即可。
2023-10-31 14:56:52
240
原创 Ant Design of React组件引用及路由跳转
注意如果要使用Ant 的图标，需要另外引入，从 4.0 开始，antd 不再内置 Icon 组件，需使用独立的包 @ant-design/icons。这里我们主要2点：1.使用Ant的组件；2，如何引用页面组件；Ant Design of React组件引用及路由跳转，接着笔记(1)继续。公共组件目录定义了公共组件header，和底部公共组件footer。安装成功，在home.tsx文件引用。二，页面组件的引用及导航路由跳转。一，Ant组件的引用。
2023-10-09 15:01:29
1043
原创 Ant Design of React 创建项目及运行环境
在package.json 文件下会看到antd 相关信息，如果要使用sass或者less预编样式、axios数据请求这些按需npm安装即可。本文使用 create-react-app 创建一个 TypeScript 项目，并引入 antd。1.命令行cd到对应的目录，这里是npm下回车运行，其他如pnpm yarn参考官网。2.进入项目并运行 cd到项目下运行 npm run start。antd-demo就是项目名称，可以自己随意起。这个是路由，后面要用到路由跳转，项目目录下运行。
2023-10-09 12:15:01
613
原创 前端如何将后台数组进行等分切割
实现代码（vue3+ts）：将后台请求的数据state.categoryList赋值给backendArray；12就是你需要每组按多少进行分割。原数据展示：长度为40。按12一组分割后的数据。
2023-09-04 10:09:50
1618
原创 Vue3 select循环多个，选项option不能重复被选
Vue3 select循环多个，当其中一个option值被选后，其他select里面不能再重复选择该option值。第二种，当其中一个option值被选后，其他select里面就不出现被选option的值。
2023-08-31 10:38:43
1941
原创 解决css英文内容不自动换行的问题
这里主要是针对CMS后台管理系统添加进入数据库，再抓取出来前端显示的英文不换行的问题的情况。2.通过CMS后台管理系统添加进入数据库，再抓取出来前台显示的英文不换行的问题。1.一般常见的就是英文不自动换行，或者英文换行单词背截断的问题。因为我已经使用第一种方法网上大把各种样式都试过不起作用。上面这个是没有问题的 单词不会截断换行，再看看下面的。这种处理方法通过前端样式就可以解决，方法网上很多。那只能通过后台去过滤掉了。
2023-08-24 11:26:33
5074
原创 Vue3如何获取和操作DOM元素
环境：vue3+ts+vite目标：1.修改DOM的文本值和样式2.获取后代子DOM元素,操作修改</</</</importfrom'vue'constreflog</pText1stylepadding0 30px;</</</</importfrom'vue'constreflogonMounted=>log</看到了吧。
2023-08-08 11:00:12
4384
原创 Vue3 实现产品图片放大器
Vue3 实现类似淘宝、京东产品详情图片放大器功能。2.在其他页面引用组件picShow.vue。1.创建picShow.vue组件。环境：vue3+ts+vite。
2023-08-07 16:19:57
1095
原创 解决Vue3 使用Element-Plus导航刷新active高亮消失
解决vue3使用element plus导航菜单刷新页面后active高亮消失的问题
2023-08-03 17:30:41
1857
原创 vue3引用Font-Awesome字体图标库
介绍：这里安装引用的是Font-Awesome 6.x 版本，有专业版（付费），这里只介绍免费版字体使用方法。效果：此时看到同一个图标copy两种引用方式常规和实体的区别了吧。环境：vue3+ts+vite+element plus。4.使用 （看步骤3里面引用图标处）
2023-08-03 16:07:26
1956
原创 Vue3 Radio单选切换展示不同内容
环境：vue3+ts+vite+element plus技巧：v-if，v-show的使用实现功能：点击单选框展示不同的输入框1.默认选项型号是选中的，型号输入框也是展示的，那么颜色输入框是需要隐藏，定义isShow,此时，isShow是true，!isShow就是false了，显示如下2.获取单选框选择的radio值。切换的时候下面输入框也要随之切换。定义@change事件，如果val=1，isShow的值是true，！
2023-07-27 15:41:30
2885
原创 Vue3 Element-plus分页效果动态数据展示
根据自己的接口请求的数据，对应好每页数量，当前页，总数等参数赋值即可，请求参数只需要当前页pageNum 和每页数量pageSize 即可。环境：vue3+ts+vite+element plus。接着前面的axios封装请求数据，继续。
2023-07-26 15:17:01
773
原创 Vue3兄弟组件之间传值-mitt
3.此时我的文件目录结构是这样的，news.vue作为发送数据的一方，about.vue作为接收数据的一方。news里面定义了一个money的变量，值为100，通过点击发送给about组件。安装成功在package.json文件会有显示。2.在main.js里面全局引用。环境vue3+ts+vite。在终端cd到项目目录运行。
2023-07-25 14:06:19
722
原创 Vue3+TS+Vite创建项目，并导入Element-plus和Sass
1.桌面新建一个文件夹Vue3-app打开编辑器导入文件夹，编辑器打开终端输入或者命令行工具cd到项目目录下输入回车运行这里我选择了TS+Vite来开发，并选择安装路由2.cd到 vue-project目录下 输入回车运行3.安装完成后 输入回车运行浏览器打开localhost即可看到页面。
2023-07-11 23:28:27
1284
原创 export const和 const的区别
constconst是 JavaScript 中用于声明常量的关键字。通过使用const关键字，你可以创建一个只读的、不可更改的常量。一旦使用const声明一个变量并初始化它，就不能再对其进行重新赋值。例如：是用于在模块中导出常量的语法。通过使用，你可以将一个常量导出供其他模块使用。例如：// 使用模块中的常量 import {在上面的示例中，我们将常量PI导出到模块中，并在其他模块中使用import语句导入该常量。const用于声明常量，创建一个只读的、不可更改的变量。
2023-07-11 16:17:30
1990
原创 Nuxt3 components公共组件
效果实现：写一个公共的right组件，在index和about页面同时引用它。about页面引用及效果。2.index页面引入。index页面显示效果。
2023-07-09 12:10:31
644
原创 Nuxt3引入Element-plus和sass
或者命令行cd到项目文件 运行npm install @element-plus/nuxt。或者命令行cd到项目文件 运行npm install sass --save-dev。打开编辑器终端 运行npm install @element-plus/nuxt。打开编辑器终端 运行npm install sass --save-dev。在nuxt.config.ts文件添加代码。package.json文件会出现。package.json文件会出现。
2023-07-08 23:53:09
1426
原创 Nuxt3如何新建项目
1.在app.vue根目录同级新建pages文件夹 再新建一个index页面(新建文件目录参考官方文档。2.命令行cd到目录下运行 npx nuxi init nuxt-test 回车运行下。3.再cd nuxt-test到目录下 运行npm install。4.运行完成后 npm run dev 启动项目 显示以下页面。本人修改代码后刷新是显示空白页面 重新运行后才看到自己写的内容。index.vue 里面写点代码保存后 链接刷新。2.app.vue代码里面修改为。
2023-07-08 23:07:16
1294
原创 js延时提示框
延时提示框效果经常会用到直接上代码 <style type="text/css"> #div1 { height: 100px; width: 100px; background-color: red; } #div2 { height: 300px; width: 300px; background-color: blue; display: none; } div { margin: 5px;
2020-09-16 15:40:27
441
1
原创 jquery 获取radio选中的value值，并实现切换效果
jquery 获取radio选中的value值，并实现切换效果直接上代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .test2 .box{ padding: 50px 0; } .test2 .box1{ background: red; } .te
2020-08-12 16:09:34
956
1
原创 jquery实现checkbox 全选、反选（含2级筛选）
<form action=""> <div class="test1"> <div> <input type="checkbox" id="allCheck">全选 </div> <div> <input type="checkbox" name="items">选项1 <input type="checkbox" name="items">选项2 <input typ
2020-08-12 15:47:47
580
1
原创 CSS文本两端对齐
CSS文本两端对齐的方法1）文章常用看下面这种场景：使用代码text-align: justify;2）配合表单常用看下面场景：实现以下效果：使用text-align-last: justify;代码结构如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"
2020-07-24 15:02:45
426
2
原创 jq获取滚动条滚动的高度
这里写自定义目录标题jq获取滚动条滚动的高度jq获取滚动条滚动的高度场景：为了实现div滚动到一定的位置时，变成悬浮顶部的效果var win=$(window); //得到窗口对象var sc=$(document);//得到document文档对象。$(function () { win.scroll(function() { if (sc.scrollTop() >= 950) { //console.log("滚动距离:"+sc.scrollTop()) $('#
2020-07-10 18:05:24
2957
原创 html5 required的提示文字自定义
在做一个纯英文网站时，遇到了表单验证，input未输入文字的时候，点击提交按钮 发现有一个提示框“请填写此字段”。但是我需要改成英文的提示，于是网上搜答案<input type=“text” required oninvalid=“setCustomValidity(‘不能为空xxxxxxx’)” οninput=“setCustomValidity(’’)”>于是最拿手的复制粘贴，结果input里面输入文本后不为空了，提示框里面文字确实是变了英文，但是发现点提交按钮还是会提示为空。于
2020-05-21 10:05:00
3171
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人