---
order: 1
zh-CN:
	title: 基础用法
	color: 颜色
	size: 尺寸
	red: 红色
	blue: 蓝色
	golden: 土豪金
	black: 黑色
	gray: 灰色

en-US:
	title: Basic Usage
	color: color
	size: size
	red: red
	blue: blue
	golden: golden
	black: black
	gray: gray

---

```jsx
import { SKU } from 'zent';

const skuTree = [
	{
		id: 10740,
		text: '{i18n.color}',
	},
	{
		id: 40732,
		text: '{i18n.size}',
	},
];

const sku = [
	{
		id: 3,
		text: '{i18n.blue}',
	},
	{
		id: 10,
		text: '{i18n.red}',
	},
	{
		id: 30,
		text: '{i18n.golden}',
	},
	{
		id: 137,
		text: '{i18n.black}',
	},
	{
		id: 138,
		text: '{i18n.gray}',
	},
];

class Simple extends Component {
	fetchSKUTree() {
		return new Promise(resolve => {
			resolve(skuTree);
		});
	}

	fetchSKU() {
		return new Promise(resolve => {
			resolve(sku);
		});
	}

	render() {
		return (
			<SKU
				showSKULabel
				onFetchGroup={this.fetchSKUTree}
				onFetchSKU={this.fetchSKU}
			/>
		);
	}
}

ReactDOM.render(<Simple />, mountNode);
```