基础必读

组件是我们搭建PC页面的砖块。组件库里提供了几乎所有的Antd组件，以及一些扩展与创新组件。在深入学习每个组件之前，请先阅读组件一览来整体了解组件库阵容。

组件的使用包含选中、配置、交互三大主题：

• 选中：如何在编辑器中准确选中某个组件
• 配置：如何对组件的外观、样式、数据等进行配置
• 交互：如何实现组件自身的UI交互以及组件之间的数据传递等

选中组件

想要操作某个组件，首先要选中该组件。

鼠标选取

最直接的方法是用鼠标选取。如图所示，当鼠标经过某个组件时，其轮廓变为橙色实线、组件名称会显示。此时单击左键即可选中该组件，其轮廓变为流动的虚线、左上角出现组件基础操作、位置和尺寸配置，编辑器右侧配置栏显示该组件的其他配置项。

大纲选取

因为组件可以堆叠、嵌套，在实际使用中很容易出现一个组件遮住另外一个，导致不便用鼠标选取。此时可以点击编辑器左上角的 # 图标，打开页面大纲。这里展示了所有的组件以及嵌套关系，点击大纲节点即可精确选中组件。# 图标后面是面包屑导航，它展示了当前选中组件在页面中的路径。 如图所示：

组件命名

就和变量命名一样，最佳实践之一就是规范命名：简洁准确、有意义、避免重复。选中组件，然后在弹出的配置栏里就可以修改名称，这样一来，无论是鼠标选取还是大纲选取，都能进一步提高便捷性，避免误选。

组件配置

每个组件都有自己的配置项，分为以下几部分：

• 尺寸与位置：在选中组件左上角的弹出框里设置
  
• 外边距：在选中组件轮廓外侧设置，上下左右各有一个可拖动的小把手，双击时可以输入数值
  
• 样式：大部分组件都提供了背景、边框、内边距、最大宽高度等配置，均在右侧配置栏里的「样式」选项卡中，不同组件的可用样式属性也不一样
  
• 常规：每个组件都有自己的「常规配置」，比如形状组件可以选择形状、按钮组件可以配置按钮标题、选择器组件可以配置选项等，组件被选中时右侧配置栏中会默认展示这个选项卡，具体可用配置项因组件功能而异。

一些通用的重要配置

内容布局

几乎所有组件的常规配置里都有内容布局设置，它决定了组件的内容将如何排版：

布局方式	说明
自动排版	编辑时可以用鼠标自由拖动位置，运行时会根据盒子特性进行自动排版
纵向排版	相当于flex-direction: column
横向排版	相当于flex-direction: row
自由排版	相当于给该容器设置了相对定位，内部自由放置的子组件都设置了绝对定位

手写样式

如果配置栏提供的属性不满足需求，可以点击样式配置栏中灰色标题右侧的图标「代码编辑」

JS动态样式

有时候我们需要用JS来控制组件的样式，比如这样一个小需求：页面加载时将一段文字的颜色变为红色。

这就需要在交互部分进行实现，基本思路是：在页面加载事件中，用逻辑组件「JS计算」输出样式代码，然后传给需要设置样式的组件 —— 能这样做的原因是，几乎所有组件都支持动态设置样式。

当我们在页面打开时用一个逻辑连线连接到一个组件上时就会发现，有的组件支持两种设置样式的方式（比如自定义容器），有的则只支持一种（比如文本组件），如图所示：

动态设置样式

这种方式就是把一个样式对象传给动态设置样式端口，可以用 「JS计算」 直接输出，然后连接到组件的 「动态样式设置」 端口。如图所示：

设置样式

文本组件只支持第2种样式设置方式：使用selector。selector需要在对应组件的样式设置面板去获得，如图所示： 复制了selector后，我们只需要在JS计算的输出语句里使用复制的selector，并填写样式：