---
name: "PickerViewColumn"
mode: "component"
versionRequirements:
- { name: "@ray-js/ray", version: "0.5.10" }
title: "PickerViewColumn - 滚动选择器子项"
---
## PickerViewColumn
> [VERSION] @ray-js/ray >= 0.5.10
### 描述
滚动选择器子项，仅可放置于 PickerView 中，高度自动与选中框一致。
### 示例代码
#### 基础用法
```tsx
import React from 'react';
import { PickerView, PickerViewColumn, View, Text } from '@ray-js/ray';
export default function () {
const [current, setCurrent] = React.useState([0]);
const range = ['巴西', '中国', '日本', '美国'];
return (
当前选择: {range[current[0]]}
setCurrent(e.value)}
value={current}
style={{ height: '200px', marginTop: '10px' }}
>
{range.map((item, index) => (
{item}
))}
);
}
```
#### 多列使用
```tsx
import React from 'react';
import { PickerView, PickerViewColumn, View, Text } from '@ray-js/ray';
export default function () {
const [current, setCurrent] = React.useState([0, 0]);
const provinces = ['广东', '浙江', '江苏', '北京'];
const cities = ['深圳', '广州', '东莞', '佛山'];
return (
当前选择: {provinces[current[0]]} - {cities[current[1]]}
setCurrent(e.value)}
value={current}
style={{ height: '200px', marginTop: '10px' }}
>
{provinces.map((item, index) => (
{item}
))}
{cities.map((item, index) => (
{item}
))}
);
}
```