---
title: 1.级联选择器
order: 1

---

##### 基础用法 样式定制


```jsx

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { YwCascader } from '@ywfe/yw-design';
class App extends Component {
 constructor(props) {
    super(props);

    this.state = {
      data: []
    };
  }

  componentDidMount() {
    fetch("https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json")
      .then(response => response.json())
      .then(data => {
        this.setState({ data });
      })
      .catch(e => console.log(e));
  }
  handleChange(value, data, extra) {
    console.log(value, data, extra);
  }
  itemRender(itemData) {
    return `${itemData.label}(${itemData.value})`;
  }

  render() {
    return (
      <YwCascader
        dataSource={this.state.data}
        onChange={this.handleChange}
        listStyle={{width:'256px',height:'314px'}}
        itemRender={this.itemRender}
      />
    );
  }
}

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