---
name: "PickerViewColumn"
mode: "component"
versionRequirements:
- { name: "@ray-js/ray", version: "0.5.10" }
title: "PickerViewColumn - Scroll picker child item"
---
## PickerViewColumn
> [VERSION] @ray-js/ray >= 0.5.10
### Description
Scrolling picker subitem that can only be placed inside PickerView; its height automatically matches the selection box.
### Examples
#### Basic usage
```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 = ['Brazil', 'China', 'Japan', 'United States'];
return (
当前选择: {range[current[0]]}
setCurrent(e.value)}
value={current}
style={{ height: '200px', marginTop: '10px' }}
>
{range.map((item, index) => (
{item}
))}
);
}
```
#### Multi-column usage
```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 = ['Guangdong', 'Zhejiang', 'Jiangsu', 'Beijing'];
const cities = ['Shenzhen', 'Guangzhou', 'Dongguan', 'Foshan'];
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}
))}
);
}
```