---
title: Simple Usage
order: 1
---

本 Demo 演示一行文字的用法。

```jsx
import React, { Component } from "react";
import ReactDOM from "react-dom";
import "@alifd/next/dist/next.css";
import "@alifd/meet-react/dist/meet-react.min.css"; // 按需 引入无线主题
import OcAddress from "@alicd/oc-address";

class App extends Component {
  render() {
    const props = {
      name: 'address',
      level: 4,
      size: 'medium',//select('size', ['small', 'medium', 'large'], 'medium'),
      overseas: false,
      hasClear: false,
      disabled: false,
      showSearch: false,
      readOnly: false,
      fixedWidth: true,
      animation: true,
      defaultValue: {
        country: 1,
        province: 630000,
        city: 632100,
        area: 632122,
        town: 630222209,
      },
      onChange: (v1, v2) => {
        console.log('onChange: ', v1, v2);
      },
    };

    const multiProps = {
      style: { width: 300 },
      name: 'multi address',
      level: 4,
      size: 'medium',//select('size', ['small', 'medium', 'large'], 'medium'),
      overseas: false,
      hasClear: false,
      disabled: false,
      showSearch: false,
      readOnly: false,
      fixedWidth: true,
      animation: true,
      defaultValue: [
        {
          country: '1',
          province: '630000',
          city: '632100',
          area: '632122',
          town: '630222209',
        },
        {
          country: '1',
          province: '630000',
          city: '632100',
          area: '632123',
          town: '630202101',
        },
      ],
      onChange: (v1, v2) => {
        console.log(v1, v2);
      },
    };
    return (
      <div>
        <OcAddress {...props}/>
        <br/>
        <br/>
        <OcAddress.Multi {...multiProps}/>
      </div>
    );
  }
}

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