# 列表组件
> 该组件可以在页面上产生一个无序列表或有序列表。

### 作用
列表组件为块级组件，每个子项也是独立的块级组件。列表组件可以独立使用，也可以作为高级组件，如 `Tab` 组件、`Nav` 组件的底层实现。
 
### 语法
##### 私有参数

| 参数名 | 类型 | 默认值 | 描述
| :-: | :-: | :-: | :- |
| `label` | string | ul | 设置列表的类型，支持的参数有`ul`、 `ol`。 |
| `items` | array | [] | 设置列表项，由item对象或字符型值组成，item对象见下表。 |

item 对象：

| 参数名 | 类型  | 描述
| :-: | :-: | :- |
| `value` | string  | 设置该项显示的内容。 |

##### 调用方式
``` jsx
import Link from '@Link';
//List支持直接传入字符型数组作为 items 的值。
<List {...{
       items:[1,2,3,4,5]
    }} />

//List支持直接传入字符型数组作为 items 的值。
<List {...{
       items:[{value:1},{value:2},{value:3},{value:4},{value:5}]
    }} />
```

##### 渲染结果
两种组件引用方式渲染出相同结果：

``` html
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
```
### 最佳实践
通过 [公共配置](../ch1/public.md)，组件可以实现丰富的样式和逻辑的控制。
##### item 类型
在列表组件中，我们支持多种item的传入格式。

可以传入一个字符串数组：
```js
{
    items:['a','b','c']
}
```
可以传入对象格式：
```js
{
    items:[{value:'a'},{value:'b'},{value:'c'}]
}
```
也可以混合传入：
```js
{
    items:[a,{value:'b'},c]
}
```
传入字符型数组可以直接将数组的每一项渲染到列表的 `li` 元素中。若传入的是对象数组，则将数组中每个对象的 `value` 属性的值渲染到列表的 `li` 元素中。
> 使用对象数组可以为每个数组对象单独设置 [公共配置](../ch1/public.md)。单独设置的属性将应用至每一个独立的 `li` 标签。