字数

594 字

阅读时间

3 分钟

const { TextArea } = Input;

是给 TextArea 赋 Input 中的某个属性吗,

点操作符 (.) 用来直接访问对象的某个属性。例如： 解构赋值使用花括号 {}，可以从对象中提取属性并将它们赋值给变量。

• 点操作符 (.) 直接读取对象中的属性，如 obj.name。
• 解构赋值 ({}) 则是通过语法将对象中的属性提取并赋值给变量，如 const { name } = obj;。

const Input = {
  TextArea: () => console.log("This is a TextArea")
};

// 使用解构赋值
const { TextArea } = Input;
TextArea(); // 输出 "This is a TextArea"

// 使用属性访问
const TextArea = Input.TextArea;
TextArea(); // 输出 "This is a TextArea"

详细解释一下：

const { TextArea } = Input; 这行代码并不是给 TextArea 赋予 Input 中的某个属性，而是使用了 JavaScript 的解构赋值语法从 Input 对象中提取 TextArea 组件。

让我们更详细地解释：

• Input 是 Ant Design 库中的一个复合组件。

• TextArea 是 Input 组件的一个子组件或变体。

• 这行代码使用解构赋值从 Input 中提取出 TextArea 组件，使其可以直接使用。

这相当于：

const TextArea = Input.TextArea;

这样做的好处是：

• 代码更简洁。

2. 可以直接使用 <TextArea> 而不是 <Input.TextArea>。

在您的代码中：

import { Typography, Input } from 'antd'

const { Paragraph } = Typography

const { TextArea } = Input

// ...

<TextArea placeholder={placeholder}></TextArea>

这里先从 antd 导入 Input，然后从 Input 中解构出 TextArea，最后直接使用 <TextArea> 组件。

总之，这不是赋值操作，而是一种从复合组件中提取子组件的方式，使得代码更加简洁和易读。 解构赋值的原理 ![[Pasted image 20240703215546.png]]

const {age: age, username: uname}={username: 'Alex' age: 18};
console.log (age, uname);

可以理解成username的别名是uname, 也可以理解成等号左面的username和等号右面的username匹配上了, 把右面的username的值给左面的

![[Pasted image 20240302185536.png]]

![[Pasted image 20240302185609.png]]

![[Pasted image 20240302185712.png]]

![[Pasted image 20240302185729.png]]

![[Pasted image 20240302220118.png]] 对象的解构赋值在实践中常用来给函数赋值，避免调用函数时打对象名麻烦，例如 ![[Pasted image 20240302220212.png]]

![[Pasted image 20240302220346.png]]

![[Pasted image 20240511233728.png]] ![[Pasted image 20240512182714.png]]

贡献者

sunchengzhi

文件历史

最后编辑于 大约 2 个月前查看完整历史

de5fa-fix:修改文件名