React项目知识积累(三)

1.@primary-color 公共样式

less文件中的@primary-color,会在config.js中的theme中统一写,方便统一更改。

config.js:
theme{"primary-color":"#f0f0f0","font-size":"16px",
}less:
.classname{color:@primary-color;font-size:@font-size;
}

2.组件传参的时候,如果是布尔类型的,并且有默认值的,可以直接这样来写:

//父组件
<TableMyself explanatoryText /> //默认是false,这样传的话,传的值就是true。//TableMyself 子组件,默认值是false
const TableMyself=({ explanatoryText = false, })=>{ const rules= [{ required:true,message:"这是必填的" }];return (<div> </div>);};export default TableMyself;

3.js中组件的导出

export { default as input } from './input';

这行代码的作用是导出 ./input 模块中的默认出口,并将其重命名为 input。这样,在其他文件中,您可以使用 import input from './input' 来导入这个重命名后的默认出口。

请注意,default 关键字是用来指示模块中的默认导出项的。如果一个模块中有多个导出项,您需要为它们指定名称,或者使用 export default 来导出其中一个作为默认导出项。在一个模块中,默认导出项只能有一个。

在其他文件中,您可以使用 import input from './input' 语法来导入这个重命名后的默认导出项。

请注意,一个模块中只能有一个默认导出项。如果您想要导出多个不同的项,您需要为每个导出项指定一个名称,如下所示:

export const someConstant = 'value';
export function someFunction() {// function body
}
export class SomeClass {}

我们导出了一个常量、一个函数和一个类,每个导出项都有明确的名称。

as 是用来在导出(export)或导入(import)时重命名项的关键字。当你导出(export)一个模块时,你可以使用 as 关键字来改变导出项的名称,使其与原始模块中的名称不同。同样,在导入(import)模块时,你也可以使用 as 来给导入的项指定一个新的名称。

// components.js
export const Button = /* ... */;
export const Input = /* ... */;// main.js
import { Button as CustomButton, Input as CustomInput } from './components.js';// 现在我们可以使用 CustomButton 和 CustomInput 而不是 Button 和 Input

我们使用 as 来将 ButtonInput 重命名为 CustomButtonCustomInput。这样,在 main.js 文件中,我们可以使用 CustomButtonCustomInput 来引用从 components.js 导入的组件。

4.Array.isArray()

Array.isArray() 是 JavaScript 中的一个静态方法,用于检查传递给它的参数是否是一个 Array 对象。这个方法不会检查对象的原型链,也不会依赖于它所附加的 Array 构造函数。如果参数是一个数组,Array.isArray() 返回 true,否则返回 false

console.log(Array.isArray([1, 2, 3])); // 输出:true
console.log(Array.isArray({ foo: 123 })); // 输出:false
console.log(Array.isArray('hello')); // 输出:false
console.log(Array.isArray(undefined)); // 输出:false

在这个例子中,Array.isArray([1, 2, 3]) 返回 true,因为 [1, 2, 3] 是一个数组。而 Array.isArray({ foo: 123 })Array.isArray('hello')Array.isArray(undefined) 都返回 false,因为它们都不是数组。

这个方法通常用于检查变量是否应该被当作数组处理,或者在处理数组时进行类型检查。

5.join( )

join 方法用于将数组中的所有元素连接成一个字符串。该方法接受一个可选参数,即一个分隔符字符串,用于在数组的每个元素之间插入。如果没有提供分隔符,则默认使用逗号。

var array = ['apple', 'banana', 'cherry'];
var string = array.join();// 输出: "apple,banana,cherry"var array = ['apple', 'banana', 'cherry'];
var string = array.join(' | ');
console.log(string); // 输出: "apple | banana | cherry"text?.join(" \n ");

6.async   await 

asyncawait 是 JavaScript 中用于处理异步编程的关键词。

async 关键字用于声明一个异步函数。一个异步函数返回一个 Promise 对象,这意味着你可以使用 then 和 catch 方法来处理异步函数的结果。

async function myAsyncFunction() {// 异步操作...return "Hello, World!";
}myAsyncFunction().then(result => {console.log(result); // "Hello, World!"
});

await 关键字用于等待一个 Promise 解决。在异步函数内部,你可以使用 await 来暂停代码的执行,直到 Promise 解决为止。

async function fetchData() {const response = await fetch('https://api.example.com/data');const data = await response.json();console.log(data);
}fetchData();

在上面的例子中,fetch 是一个异步操作,它会返回一个 Promise。使用 await 等待 fetch 操作完成后,再解析 JSON 数据。

await 只能在异步函数内部使用。如果在同步函数或代码块中使用 await,将会抛出一个错误。

使用 asyncawait 可以使得异步代码更加清晰、易读和易维护,因为它允许你使用同步代码的写法来处理异步操作。

const onFish = async ()={
try{ await myRequest(); }catch{ }
}

7.try  catch

trycatch 语句用于捕获和处理代码块中的错误。这是处理异步编程中潜在错误的一种方式。

try 语句块用于包围可能会抛出错误的代码。如果在这个块中的代码抛出了一个错误,执行将立即跳到 catch 语句块(如果有的话)。

try {// 可能会抛出错误的代码const response = await fetch('https://api.example.com/data');const data = await response.json();console.log(data);
} catch (error) {// 处理错误的代码console.error('发生错误:', error);
}

在上述代码中,fetch 操作可能会因为多种原因失败(例如,网络问题或服务器错误),导致一个错误被抛出。try 块中的代码试图执行这个潜在的异步操作,而 catch 块则用于捕获任何抛出的错误。

catch 语句块接收一个参数,通常命名为 error,它包含了被抛出的错误对象。在 catch 块中,你可以添加代码来处理错误,例如记录错误、显示错误消息或进行其他错误处理操作。

如果你想在无论是否有错误抛出的情况下执行某些代码,可以使用一个可选的 finally 语句块。finally 块会在 trycatch 块之后执行,通常用于执行清理工作或释放资源。

try {// 可能会抛出错误的代码const response = await fetch('https://api.example.com/data');const data = await response.json();console.log(data);
} catch (error) {// 处理错误的代码console.error('发生错误:', error);
} finally {// 这段代码无论是否抛出错误都会执行console.log('尝试完成,进行清理工作');
}

在上述代码中,无论 try 块中的代码是否抛出错误,finally 块中的代码都会执行。这可以用来确保资源被正确释放或文件被关闭等。

8.Object.keys()

Object.keys()是一个内置函数,用于返回一个由给定对象自身的所有可枚举属性名称组成的数组。

const obj = {name: '张三',age: 25,gender: '男'
};const keys = Object.keys(obj);
console.log(keys); // 输出: ['name', 'age', 'gender']

在这个例子中,Object.keys(obj)返回了一个数组 ['name', 'age', 'gender'],包含了对象 obj 的所有可枚举属性名。

Object.keys()的参数可以是任何对象,包括函数、数组和日期对象。对于数组和日期对象,它会返回索引数组。

const arr = ['a', 'b', 'c'];
const keysArr = Object.keys(arr);
console.log(keysArr); // 输出: ['0', '1', '2']

在这个例子中,Object.keys(arr)返回了数组 arr 的索引数组 ['0', '1', '2']

对于函数对象,Object.keys()会返回所有可枚举属性,包括函数本身:

function sayHello() {console.log('你好');
}const keysFunc = Object.keys(sayHello);
console.log(keysFunc); // 输出: ['name', 'length', 'prototype', 'sayHello']

在这个例子中,Object.keys(sayHello)返回了函数 sayHello 的所有可枚举属性,包括函数名、长度、原型和函数本身。

Object.keys()是一个非常有用的工具,用于探索对象的属性和遍历对象的属性名。

9.formRef.current.value

如果你想要更新 ref 对象引用的 DOM 元素的属性,你可以直接使用 ref.current.props.attributeName 来访问或设置属性。

例如,如果你想更新一个 <input> 元素的值,你可以这样做:

useEffect(() => {if (formRef.current) {formRef.current.value = '新的值';}
}, []);

在这个例子中,formRef.current.value 访问了 <input> 元素的 value 属性,并将其设置为字符串 '新的值'

10.formRef.current.resetFields( )

在 React 中,如果你想要重置一个表单的所有字段,你通常会使用 reset 方法。

如果你有一个 formRef 引用了一个表单元素,并且该表单元素有一个 resetFields 方法,你可以直接调用它来重置表单的字段。例如,如果你使用的是 react-hook-form 这样的表单库,你可以这样调用 resetFields 方法:

import { useForm } from 'react-hook-form';function MyForm() {const { register, reset } = useForm();// ...const resetForm = () => {reset(); // 这将重置所有字段};return (<form>{/* 表单元素 */}<button type="button" onClick={resetForm}>重置表单</button></form>);
}

在这个例子中,reset() 方法重置了所有表单字段。

如果你是在自定义表单组件中,并且定义了一个 resetFields 方法,你可以这样调用它:

function MyFormComponent() {const formRef = useRef();const resetFields = () => {formRef.current.resetFields(); // 调用自定义的 resetFields 方法};return (<form ref={formRef}>{/* 表单元素 */}<button type="button" onClick={resetFields}>重置表单</button></form>);
}

在这个例子中,我们假设 MyFormComponent 组件有一个 resetFields 方法来重置表单字段。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/14401.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

用手机打印需要下载什么软件

在快节奏的现代生活中&#xff0c;打印需求无处不在&#xff0c;无论是工作文件、学习资料还是生活小贴士&#xff0c;都可能需要一纸呈现。然而&#xff0c;传统的打印方式往往受限于时间和地点&#xff0c;让人倍感不便。今天&#xff0c;就为大家推荐一款便捷又省钱的手机打…

做OZON怎么选择物流,OZON物流Xingyuan

随着跨境电商的蓬勃发展&#xff0c;OZON作为俄罗斯领先的电商平台&#xff0c;吸引了大量中国卖家入驻。然而&#xff0c;物流作为跨境电商的关键环节&#xff0c;其选择对于卖家来说至关重要。本文将围绕“做OZON怎么选择物流”这一问题&#xff0c;深度解析OZON物流Xingyuan…

数仓建模—数据模型的 10 个常见错误

数仓建模—数据模型的 10 个常见错误 1 将模式设计视为一次性项目 构建数据资产是一个持续的过程。随着您的分析需求随着时间的推移而变化,架构也必须进行调整。将数据建模视为一次性活动是不现实的。想想那些因为源系统之一的数据结构发生变化而不得不更改列名、数据类型,…

“云加”万里信,共赴山海约,解密协同云官网设计之路

门户的设计改版是怎样的&#xff1f;本文从浪潮海岳云加案例出发&#xff0c;手把手带你认识完整系统的门户设计升级。 一、升级背景 1、云加官网作为云加产品对外唯一官方门户&#xff0c;承载整个云加业务售前及售中的核心渠道&#xff0c;是用户接触云加产品的重要渠道之一…

解决GoLand无法Debug

goland 调试的的时候提示如下错误 WARNING: undefined behavior - version of Delve is too old for Go version 1.22.3 (maximum supported v 其实个原因是因为正在使用的Delve调试器版本太旧&#xff0c;无法兼容当前的Go语言版本1.22.3。Delve是Go语言的一个调试工具&#…

汽车标定技术(二十一)--英飞凌TC3xx的OLDA怎么玩?(1)

目录 1.英飞凌提出的OLDA是什么? 2.小结 1.英飞凌提出的OLDA是什么? 在研究TC3xx的内部总线互联时,偶然发现了OLDA(OnLine Data Acquisition),看名字就容易猜到,这个大概率是和标定测量系统有关。进一步了解OLDA的描述,更加好奇了: The OLDA is an address space whe…

构建稳健、高效与安全的企业级API网关

在现代企业信息化建设中&#xff0c;各种微服务架构系统以及不同类型的管理系统广泛兴起&#xff0c;平台中的数据安全逐渐成为企业重视的部分&#xff0c;在iPaaS系统中&#xff0c;一个名为“企业级API网关”的功能出现在大众眼中&#xff0c;随着企业信息化建设的不断深入&a…

vue3+ts+vant4 实现购物车 前端代码

一、功能效果 二、前端代码 购物车的vue代码 <template><van-nav-bar left-text"返回" title"购物车" click-left"onClickLeft"><template #right><van-popover v-model:show"showPopover" placement"bot…

Transormer(2)-位置编码

位置编码公式 偶数位置用sin,奇数位置用cos. d_model 表示token的维度&#xff1b;pos表示token在序列中的位置&#xff1b;i表示每个token编码的第i个位置&#xff0c;属于[0,d_model)。 torch实现 import math import torch from torch import nn from torch.autograd im…

移动云ECS主机:未来云计算的驱动力

文章目录 前言一、移动云云主机ECS云主机ECS产品优势云主机ECS产品功能云主机ECS应用场景 二、移动云云主机ECS选购三、移动云云主机ECS配置四、移动云云主机ECS牛刀小试五、移动云云主机ECS安装部署消息中间件RocketMQ云主机ECS安装RocketMQ云主机ECS配置RocketMQ云主机ECS启动…

ubuntu22部署Docker私有仓库Harbor (http https方式)

harbor日志&#xff1a;/var/log/harbor 前置安装配置 需先安装docker和docker-compose&#xff1a; 0.配置清华大学apt源并安装docker #信任 Docker 的 GPG 公钥: sudo apt-get install ca-certificates curl gnupg curl -fsSL https://download.docker.com/linux/ubunt…

网络安全快速入门(十五) linux用户管理

14.1 前言 前面我们已经大概了解了Linux的网络链接&#xff0c;今天我们来看看Linux用户管理的一些基础操作&#xff0c;话不多说&#xff0c;我们来开始吧&#xff01;&#xff01; 14.2 用户的基础知识 我们先了解一些有关linux用户的一些基础知识&#xff0c;我们从Linux用…

【运维项目经历|013】:VSFTP安全加固与性能优化项目

目录 项目名称 项目背景 项目目标 项目成果 我的角色与职责 我主要完成的工作内容 本次项目涉及的技术 本次项目遇到的问题与解决方法 本次项目中可能被面试官问到的技术性问题 问题1&#xff1a;什么是FTP&#xff1f; 问题2&#xff1a;什么是VSFTP&#xff1f; 问…

HQL面试题练习 —— 互相关注

目录 1 题目2 建表语句3 题解 1 题目 现有用户关注者列表记录表 t_user_follower&#xff0c;有两个字段&#xff0c;用户ID&#xff08;user_id&#xff09;&#xff0c;关注者列表&#xff08;follower_ids)&#xff0c;关注者列表中是关注用户的用户ID&#xff0c;数据样例如…

C语言--输入一个整数代表秒数,将这个数转化为对应的小时数、分钟数、和秒数

#include <stdio.h>int main() {int h,m,s;scanf("%d",&s);ms/60;//计算分钟数ss%60;//剩余的秒数hm/60;//计算小时数mm%60;//剩余的分钟数printf("%d %d %d\n",h,m,s); } //先将分钟数求出&#xff0c;再将多出的秒求出作为最后的打印的s //再用…

GESP 四级冲刺训练营(1):字符串

GESP 四级冲刺训练营&#xff1a;字符串 一、基本常识1. 功能函数2. 注意事项3. 输入输出3.1 输入3.2 输出 二、字符串算法1. 基础字符串1.1 回文字符串1.2 亲朋字符串 2. 尺取法求解2.1 尺取法公式2.2 最长小写子串 2.3 尺取法易错 三、拓展习题1. 相似字符串2. 两数之和 一、…

构建sqli-labs学习环境与掌握SQL注入技术教程

根据提供的文档内容&#xff0c;以下是关于安装sqli-labs学习环境和SQLI-LABS教学的详细步骤和知识点&#xff1a; 安装sqli-labs学习环境 环境准备 操作系统&#xff1a;CentOS 7.6主机名&#xff1a;xuegod63IP地址&#xff1a;192.168.1.63 关闭防火墙和SELinux 禁用并…

sharded jedis pipelined 执行后 数据并未存入redis

前言 因为历史原因&#xff0c;在某个同步菜单操作的方法中先清除缓存&#xff0c;然后在初始化缓存。本来很正常的逻辑&#xff0c;但是这个清除是db查询获取所有的菜单 然后循环一条条删除 然后在db查询有效的菜单操作 在循环一条条插进去 经统计这个菜单操作大概有个7千个 …

深度学习之基于MTCNN+Facenet的人脸识别身份认证系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景与意义 随着信息技术的快速发展&#xff0c;身份认证技术在日常生活和工作中的重要性日益凸显。传统的…

TCP/UDP的连接机制

TCP/UDP的连接机制 TCP的连接机制 TCP&#xff08;Transmission Control Protocol&#xff09;是一种面向连接的协议&#xff0c;提供可靠的、按顺序的数据传输服务。TCP的连接机制包括连接建立、数据传输和连接终止。 1. 连接建立&#xff08;三次握手&#xff09; TCP通过…