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
来将 Button
和 Input
重命名为 CustomButton
和 CustomInput
。这样,在 main.js
文件中,我们可以使用 CustomButton
和 CustomInput
来引用从 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
async
和 await
是 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
,将会抛出一个错误。
使用 async
和 await
可以使得异步代码更加清晰、易读和易维护,因为它允许你使用同步代码的写法来处理异步操作。
const onFish = async ()={
try{ await myRequest(); }catch{ }
}
7.try catch
try
和 catch
语句用于捕获和处理代码块中的错误。这是处理异步编程中潜在错误的一种方式。
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
块会在 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);
} 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
方法来重置表单字段。