# Dropdown 下拉菜单

点击/鼠标移入元素，显示下拉菜单。

## 使用场景

- 点击按钮/标签/超链接时显示下拉菜单。
- 点击右键显示下拉菜单。
- 与 Popver 的区别在于，显示在 html 标签域内。

## 案例演示

### 基本使用

---demo
```js
import { Dropdown, Icon } from 'amos-framework';

const menus = [
  { key: '1', text: '跳转至button', icon: 'danwei', href: '/framework/button' },
  { key: '2', text: '跳转至input', icon: 'yichu', href: '/framework/input' },
  { key: '3', text: '外部链接', icon: 'setting', href: 'https://www.baidu.com', isOutter: true },
  { key: '4', text: '下拉菜单4', icon: 'shuoming', href: '/demo' }
];

class Demo extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Dropdown menus={menus}>
        <div><Icon icon="bars" />Hover me</div>
      </Dropdown>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### 设置触发方式

---demo
```js
import { Dropdown, Icon } from 'amos-framework';

const menus = [
  { key: '1', text: '跳转至button', icon: 'danwei', href: '/framework/button' },
  { key: '2', text: '跳转至input', icon: 'yichu', href: '/framework/input' },
  { key: '3', text: '外部链接', icon: 'setting', href: 'https://www.baidu.com', isOutter: true },
  { key: '4', text: '下拉菜单4', icon: 'shuoming', href: '/demo' }
];

class Demo extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Dropdown menus={menus} trigger="click">
        <div><Icon icon="bars" />点击出现下拉菜单</div>
      </Dropdown>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### 禁用

---demo
```js
import { Dropdown, Icon } from 'amos-framework';

const menus = [
  { key: '1', text: '跳转至button', icon: 'danwei', href: '/framework/button' },
  { key: '2', text: '跳转至input', icon: 'yichu', href: '/framework/input' },
  { key: '3', text: '外部链接', icon: 'setting', href: 'https://www.baidu.com', isOutter: true },
  { key: '4', text: '下拉菜单4', icon: 'shuoming', href: '/demo' }
];

class Demo extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Dropdown menus={menus} trigger="click" disabled>
        <div><Icon icon="bars" />禁用</div>
      </Dropdown>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### 菜单 ContextMenu

采用 `ctx` 类型的下来菜单

---demo
```js
import { Dropdown, Icon, Switch } from 'amos-framework';

const ctxMenus = [
  { key: '1', text: '菜单1', icon: 'add', children: [
    { key: '1-1', text: '菜单1-1' },
    { key: '1-2', text: '菜单1-2' },
    { key: '1-3', text: '菜单1-3' },
    { key: '1-4', text: '菜单1-4' }
  ] },
  { key: '2', text: '菜单2', icon: 'info' },
  { key: '2-divider', divider: true },
  { key: '3', text: '菜单3' },
  { key: '4', text: '菜单4', icon: 'shuoming', children: [
    { key: '4-1', text: '菜单4-1' },
    { key: '4-2', text: '菜单4-2' },
    { key: '4-3', text: '菜单4-3' },
    { key: '4-4', text: '菜单4-4', children: [
      { key: '4-4-1', text: '菜单441', children: [
        { key: '4-4-1-1', text: '菜单4411', children: [
          { key: '4-4-1-1-1', text: '菜单44111', children: [
            { key: '4-4-1-1-1-1', text: '菜单441111' }
          ] }
        ] }
      ] }
    ] }
  ] }
];

class Demo extends Component {
  constructor(props) {
    super(props);
  }

  onSelect = (menuItem) => {
    console.log('menuItem:', menuItem);
  }

  render() {
    return (
      <div>
        <Dropdown
          menus={ctxMenus}
          trigger="click"
          menuType="ctx"
          ctxMenuProps={{
            theme: 'dark'
          }}
          onSelect={this.onSelect}
        >
          <div><Icon icon="bars" />ContextMenu 类型</div>
        </Dropdown>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend


### 单独使用 ContextMenu

将 `ContextMenu` 作为一个独立的组件使用

---demo
```js
import { Dropdown } from 'amos-framework';

const ContextMenu = Dropdown.ContextMenu;

const ctxMenus = [
  { key: '1', text: '菜单1', icon: 'add', children: [
    { key: '1-1', text: '菜单1-1' },
    { key: '1-2', text: '菜单1-2' },
    { key: '1-3', text: '菜单1-3' },
    { key: '1-4', text: '菜单1-4' }
  ] },
  { key: '2', text: '菜单2', icon: 'info' },
  { key: '2-divider', divider: true },
  { key: '3', text: '菜单3' },
  { key: '3-divider', divider: true },
  { key: '4', text: '菜单4', icon: 'shuoming', children: [
    { key: '4-1', text: '菜单4-1' },
    { key: '4-2', text: '菜单4-2' },
    { key: '4-3', text: '菜单4-3' },
    { key: '4-4', text: '菜单4-4', children: [
      { key: '4-4-1', text: '菜单441', children: [
        { key: '4-4-1-1', text: '菜单4411', children: [
          { key: '4-4-1-1-1', text: '菜单44111', children: [
            { key: '4-4-1-1-1-1', text: '菜单441111' }
          ] }
        ] }
      ] }
    ] }
  ] }
];

class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      theme: 'dark',
      direction: 'right'
    };
  }

  onSelect = (menuItem) => {
    console.log('menuItem:', menuItem);
  }

  onChange = (onOff) => {
    this.setState({
      theme: onOff ? 'dark' : 'light'
    });
  }

  onChangeDir = (onOff) => {
    this.setState({
      direction: onOff ? 'left' : 'right'
    });
  }

  render() {
    const { theme, direction } = this.state;
    return (
      <div style={{ width: 150 }}>
        <Switch onOff={theme === 'dark'} onLabel="黑" offLabel="白" onChange={this.onChange} />
        <Switch onOff={direction === 'left'} onLabel="左" offLabel="右" onChange={this.onChangeDir} />
        <ContextMenu menus={ctxMenus} direction={direction} minWidth={80} theme={theme} />
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### 控制 onSelect 自定义菜单

设置 `customContent`，渲染自定义菜单内容。

---demo
```js
import { Dropdown, Icon } from 'amos-framework';

const menus = [
  { key: '1', text: '菜单1' },
  { key: '2', text: '菜单2' },
  { key: '3', text: '菜单3' },
  { key: '4', text: '菜单4' }
];

class Demo extends Component {

  state = {
    visible: false
  };

  onMenuSelect = (menuItem) => {
    console.log('menuItem:', menuItem);
    this.setState({
      visible: false
    });
  }

  onVisibleChange = (flag) => {
    this.setState({
      visible: flag
    });
  }

  renderCustomContent = () => {
    return (
      <ul>
        {
          menus.map(m => <li key={m.key} onClick={() => this.onMenuSelect(m)}>{m.text}</li>)
        }
      </ul>
    );
  }

  render() {
    const { visible } = this.state;
    return (
      <Dropdown
        trigger="click"
        onSelect={this.onMenuSelect}
        customContent={this.renderCustomContent()}
        visible={visible}
        onVisibleChange={this.onVisibleChange}
      >
        <div><Icon icon="bars" />更多</div>
      </Dropdown>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### 自定义渲染菜单，使用 Menu 组件

---demo
```js
import { Dropdown, Icon, Menu } from 'amos-framework';

const menus = [
  { key: '1', text: '菜单1' },
  { key: '2', text: '菜单2' },
  { key: '3', text: '菜单3' },
  { key: '4', text: '菜单4' }
];

class Demo extends Component {

  state = {
    mvisible: false
  };

  onMenuItemClick = (menuItem) => {
    console.log('click menuItem:', menuItem);
    this.setState({
      mvisible: false
    });
  }

  onMVisibleChange = (flag) => {
    this.setState({
      mvisible: flag
    });
  }

  renderMenu = () => {
    return (
      <Menu>
        {
          menus.map(m => <Menu.Item key={m.key} onClick={() => this.onMenuItemClick(m)}>{m.text}</Menu.Item>)
        }
      </Menu>
    );
  }

  render() {
    const { mvisible } = this.state;
    return (
      <Dropdown
        trigger="click"
        customContent={this.renderMenu()}
        visible={mvisible}
        onVisibleChange={this.onMVisibleChange}
      >
        <div><Icon icon="bars" />更多</div>
      </Dropdown>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### 组合使用 BuckleDropdown

---demo
```js
import { BuckleDropdown, Icon, Menu } from 'amos-framework';

const menus = [
  { key: '1', text: '菜单1' },
  { key: '2', text: '菜单2' },
  { key: '3', text: '菜单3' },
  { key: '4', text: '菜单4' }
];

/**
 * 自定义 Content 默认注入 onSelect
 */
class CustomContent extends Component {

  onClick = (menuItem) => {
    this.props.onSelect && this.props.onSelect(menuItem);
  }

  render() {
    return (
      <Menu>
        {
          menus.map(m => <Menu.Item key={m.key} onClick={() => this.onClick(m)}>{m.text}</Menu.Item>)
        }
      </Menu>
    );
  }
}

class Demo extends Component {

  state = {
    mvisible: false,
    value: '菜单1',
    secondVisible: false,
    secondValue: '菜单1'
  };

  onMenuItemClick = (menuItem) => {
    console.log('click menuItem:', menuItem);
    this.setState({
      mvisible: false,
      value: menuItem.text
    });
  }

  onMVisibleChange = (flag) => {
    this.setState({
      mvisible: flag
    });
  }

  // CustomContent 自行处理 onSelect，无需处理 secondVisible
  onSecondClick = (menuItem) => {
    console.log('Second menuItem:', menuItem);
    this.setState({
      secondValue: menuItem.text
    });
  }

  onSecondVisibleChange = (flag) => {
    this.setState({
      secondVisible: flag
    });
  }

  renderMenu = () => {
    return (
      <Menu>
        {
          menus.map(m => <Menu.Item key={m.key} onClick={() => this.onMenuItemClick(m)}>{m.text}</Menu.Item>)
        }
      </Menu>
    );
  }

  renderValue = (value) => {
    return <span><Icon icon="tip" />{value}</span>
  }

  render() {
    const { mvisible, value, secondVisible, secondValue } = this.state;
    const triggerProps = {
      customContent: this.renderMenu(),
      visible: mvisible,
      onVisibleChange: this.onMVisibleChange
    };

    const secondTriggerProps = {
      onSelect: this.onSecondClick,
      customContent: <CustomContent />,
      visible: secondVisible,
      onVisibleChange: this.onSecondVisibleChange
    };

    return (
      <div>
        <BuckleDropdown
          trigger="click"
          triggerProps={triggerProps}
          value={value}
          renderValue={this.renderValue}
        >
          <Icon icon="bars" />
        </BuckleDropdown>
        <span style={{ margin: '0 1em' }}/>
        <BuckleDropdown
          trigger="click"
          triggerPosition="left"
          triggerProps={secondTriggerProps}
          value={secondValue}
          renderValue={this.renderValue}
        >
          <Icon icon="caretdown" />
        </BuckleDropdown>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### 组合使用 BuckleDropdown outer 方式

---demo
```js
import { BuckleDropdown, Icon, Menu } from 'amos-framework';

const menus = [
  { key: '1', text: '菜单1' },
  { key: '2', text: '菜单2' },
  { key: '3', text: '菜单3' },
  { key: '4', text: '菜单4' }
];

/**
 * 自定义 Content 默认注入 onSelect
 */
class CustomContent extends Component {

  onClick = (menuItem) => {
    this.props.onSelect && this.props.onSelect(menuItem);
  }

  render() {
    return (
      <Menu>
        {
          menus.map(m => <Menu.Item key={m.key} onClick={() => this.onClick(m)}>{m.text}</Menu.Item>)
        }
      </Menu>
    );
  }
}

class Demo extends Component {

  state = {
    secondVisible: false,
    secondValue: '菜单1'
  };


  // CustomContent 自行处理 onSelect，无需处理 secondVisible
  onSecondClick = (menuItem) => {
    console.log('Second menuItem:', menuItem);
    this.setState({
      secondValue: menuItem.text
    });
  }

  onSecondVisibleChange = (flag) => {
    this.setState({
      secondVisible: flag
    });
  }

  renderValue = (value) => {
    return <span><Icon icon="tip" />{value}</span>
  }

  render() {
    const { secondVisible, secondValue } = this.state;

    const secondTriggerProps = {
      onSelect: this.onSecondClick,
      customContent: <CustomContent />,
      visible: secondVisible,
      onVisibleChange: this.onSecondVisibleChange
    };

    return (
      <div>
        <BuckleDropdown
          trigger="click"
          triggerPosition="left"
          triggerProps={secondTriggerProps}
          value={secondValue}
          renderValue={this.renderValue}
          outer
        >
          <Icon icon="caretdown" />
        </BuckleDropdown>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### 脱离当前层，采用 Popover 方式

---demo
```js
import { Dropdown, Icon } from 'amos-framework';

const { OuterDropdown } = Dropdown;

const menus = [
  { key: '1', text: '跳转至button', icon: 'danwei', href: '/framework/button' },
  { key: '2', text: '跳转至input', icon: 'yichu', href: '/framework/input' },
  { key: '3', text: '外部链接', icon: 'setting', href: 'https://www.baidu.com', isOutter: true },
  { key: '4', text: '下拉菜单4', icon: 'shuoming', href: '/demo' }
];

class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      mvisible: false
    };
  }

  onVisibleChange = (flag) => {
    this.setState({
      visible: flag
    });
  }

  onMenuItemClick = (menuItem) => {
    this.setState(
      {
        visible: false
      },
      () => {
        console.log('menu click:', menuItem);
      }
    );
  }

  renderMenu(){
    // 会给 ul 中注入 onSelect
    return (
      <ul>
        {
          menus.map(d => {
            return <li key={d.key} style={{ padding: '12px' }} onClick={() => this.onMenuItemClick(d)}>{d.text}</li>
          })
        }
      </ul>
    );
  }

  render() {
    return (
      <div>
        <OuterDropdown menus={menus}>
          <div><Icon icon="bars" />默认menuType</div>
        </OuterDropdown>
        <span style={{ margin: '0 1em' }} />
        <OuterDropdown menus={menus} menuType="ctx">
          <div><Icon icon="bars" />menuType为ctx</div>
        </OuterDropdown>
        <span style={{ margin: '0 1em' }} />
        <OuterDropdown
          trigger="click"
          customContent={this.renderMenu()}
          visible={this.state.visible}
          onVisibleChange={this.onVisibleChange}
          menuType="ctx"
        >
          <div><Icon icon="bars" />点击模式ctx</div>
        </OuterDropdown>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### 自定义 item.render 方法

> 仅在 `menuType="ctx"` 时支持。

---demo
```js
import { Dropdown, Icon, Upload } from 'amos-framework';

const { OuterDropdown } = Dropdown;

const menus = [
  { key: 'add', text: '新增', icon: 'add' },
  { key: 'edit', text: '编辑', icon: 'edit' },
  { key: 'upload', text: '上传', icon: 'upload', render(item){
    return (
      <Upload key={item.key} showUploadList={false}>
        {item}
      </Upload>
    );
  } }
];

class Demo extends Component {
  constructor(props) {
    super(props);
  }

  handleSelect = (menuItem, dataItem) => {
    console.log('menuItem|dataItem', menuItem, dataItem);
  }

  render() {
    return (
      <div>
        <OuterDropdown menus={menus} menuType="ctx" onSelect={menuItem => this.handleSelect(menuItem, '01')}>
          <div><Icon icon="bars" />测试上传数据1</div>
        </OuterDropdown>
        <br />
        <OuterDropdown menus={menus} menuType="ctx" onSelect={menuItem => this.handleSelect(menuItem, '02')}>
          <div><Icon icon="bars" />测试上传数据2</div>
        </OuterDropdown>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

## props

| params   |type     |default    | description |
|--------- |-------- |---------- |-------- |
| prefixCls | string | - | 样式前缀 |
| className | string | - | 自定义样式 |
| children | ReactNode | - | 触发菜单内容 |
| disabled | boolean | - | 菜单是否禁用 |
| visible | boolean | `false` | 菜单是否显示 |
| menus | [menusPprops](#menusPprops) | - | 菜单内容，采用内置 `MenuItem` |
| trigger | string | `hover` | 触发下拉的行为， 可选值`click、hover` |
| onVisibleChange | `function: (visible) => {}`| - | 菜单显示状态改变时调用，参数为 visible |
| onSelect | `function: (item) => {}`| - | 菜单选中事件，参数为具体的 menuItem |
| customContent | ReactNode | - | 自定义菜单内容，如果是一个 component，则除注入自身props外，额外注入 `onSelect: (menuItem) => {}`，如果点击菜单需要控制显隐时，需要主动设置 `visible` |
| menuType | string | `nav` | 默认菜单组件，可选值为 `nav、ctx` |

> 注意，当传入 `customContent` 时，默认会给该组件注入 `onSelect(item)` 属性，此时，customContent 组件，必须要能解析 onSelect 事件，该情景下，无需处理 visible。
> 如果 `customContent` 未解析 onSelect 事件，则可自行给每一个 Item 设置事件，此时需要自行处理 `visible`

扩展：

Dropdown 组件中，还提供了 `CommonDropdown 和 SelectDropdown` box 组件，可以用于自定义类似下拉选择功能。

### menusPprops

#### nav 模式 menus 数据格式

array of object:

* key: string `菜单key`
* text: string `菜单文字内容`
* icon: string `符合 aficon 的iconfont图标`，仅支持内置的 Icon 图标
* href: string `菜单链接，同 Nav组件，支持外部链接，当为外部链接时，需要设置 isOutter 为 true，同时打开新窗口`
* isOutter: boolean `可选值，是否为外部链接`

#### ctx 模式 menus 数据格式 props

* key: string `菜单key`
* text: string `菜单文字内容`
* icon: string 时仅支持内置的 icon, 同时也支持自定义的 `ReactNode`

### Dropdown.ContextMenu props

| params   |type     |default    | description |
|--------- |-------- |---------- |-------- |
| prefixCls | string | 'amos-context-menu' | 样式前缀 |
| className | string | - | 自定义样式 |
| renderIcon | () => ReactNode | - | 菜单项左侧图标，自定义渲染器 |
| onClick | `function: (itemKey) => {}`| - | 点击菜单时的 menuItemKey，父节点不响应点击 |
| onSelect | `function: (item) => {}`| - | 菜单选中事件，参数为具体的 menuItem，父节点无法触发 |
| menus | Array | - | 菜单内容，每一项数据格式 `{ key, text, icon, children, render?: (item, onItemClick) => ReactElement }` |
| minWidth | `number or string` | 100 | 最小宽度 |
| direction | string | `right` | 子菜单展开方向，支持 `left` 和 `right` |

> 注意，部分场景下，`Dropdown` 可以代替 `Popover`。只需要扩展 `customContent` 即可。
> menus 项，支持自定义渲染，`v1.9.10` 版本之后支持

### Dropdown.OuterDropdown props

同 默认 `Dropdown`，唯一区别在于，弹出层采用 `Popover` 组件

| params   |type     |default    | description |
|--------- |-------- |---------- |-------- |
| prefixCls | string | - | 样式前缀 |
| className | string | - | 自定义样式 |
| children | ReactNode | - | 触发菜单内容 |
| disabled | boolean | - | 菜单是否禁用 |
| visible | boolean | `false` | 菜单是否显示 |
| menus | [menusPprops](#menusPprops) | - | 菜单内容，采用内置 `MenuItem` |
| trigger | string | `hover` | 触发下拉的行为， 可选值`click、hover` |
| onVisibleChange | `function: (visible) => {}`| - | 菜单显示状态改变时调用，参数为 visible |
| onSelect | `function: (item) => {}`| - | 菜单选中事件，参数为具体的 menuItem |
| customContent | ReactNode | - | 自定义菜单内容，如果是一个 component，则除注入自身props外，额外注入 `onSelect: (menuItem) => {}`，如果点击菜单需要控制显隐时，需要主动设置 `visible` |
| menuType | string | `nav` | 默认菜单组件，可选值为 `nav、ctx` |
| align | string | `left` | 对齐方式，可选值为 `left、middle、right` |
| popoverClassName | String | - | popover 弹出层自定义 className |

### 独立组件 BuckleDropdown

位置 `/lib/ext/BuckleDropdown.js`

| params   |type     |default    | description |
|--------- |-------- |---------- |-------- |
| className | string | - | 自定义样式 |
| children | ReactNode | - | 触发菜单内容 |
| value | * | - | 选中的值 |
| defaultValue | * | - | 默认选中的值，不可控 |
| triggerProps | Object | - | Dropdown 组件属性,[Dropdown](#props) 或[OuterDropdown](#Dropdown.OuterDropdown-props) |
| trigger | String | 'click' | 触发方式，可选值 `click、hover` |
| renderValue | Function | - | 自定义渲染值 |
| triggerPosition | String | - | 触发点所在位置，可选值为 `left、right` |
| aligned | String | - | 是否对齐，仅在 outer 为false 的情况下起效 |
| outer | Boolean | - | true 时，设置弹出层为外围组件 |

> 注意，当 outer 为 false 时，父元素设置为 relative 以后，如果子元素超出父元素范围，部分场景下，则无法显示。
> outer 为 false 时 且 根节点 `amos-dropdown` 设置了 `overflow:hidden`，父元素设置为 relative 以后，如果子元素超出父元素范围，部分场景下，则无法显示。

### Dropdown.CommonDropdown props 说明

通用 dropdonw box，用于 `输入框+弹出层` 功能

| params   |type     |default    | description |
|--------- |-------- |---------- |-------- |
| prefixCls | string | `amos-common-dropdown` | 自定义样式前缀 |
| className | string | - | 自定义样式 |
| children | ReactNode | - | 触发菜单内容 |
| value | `string or number` | - | 值 |
| disabled | bool | - | 是否禁用 |
| open | bool | - | 控制打开 |
| minWidth | number | - | 最小宽度 |
| onToggle | `func: open => {}` | - | 打开关闭回调 |
| iptProps | object | - | input 的 props 项, 详细参考 `ClearableInput` |
| contentWrapClassName | string | - | popover 弹出层 content 的自定义样式 |
| popoverClassName | string | - | popover 弹出层自定义样式 |
| popoverProps | object | - | popover 自定义 props |

```js
closeDropdown = () => {
  this.dropdownRef && this.dropdownRef.close();
}

<CommonDropdown
  ref={node => this.dropdownRef = node}
  className={cls}
  value={value}
  onKeyDown={this.handleKeyDown}
  onChange={this.handleInput}
  disabled={!!disabled}
  {...newRestProps}
>
  <ul className={`${prefixCls}-result`}>
    {result.map((item, i) => this.renderItem(item, i))}
  </ul>
</CommonDropdown>
```

### Dropdown.SelectDropdown props 说明

该组件内部用于创建 `Select` 组件，将该组件导出，目的是为了外部可以使用 `SelectDropdown` 快速创建出类似的 下拉选择组件。

| params   |type     |default    | description |
|--------- |-------- |---------- |-------- |
| prefixCls | string | `amos-select` | 自定义样式前缀 |
| className | string | - | 自定义样式 |
| children | ReactNode | - | 触发菜单内容 |

```js
<SelectDropdown
  ref={node => this.selectDropdownRef = node}
  className={cls}
  title={Title}
  onToggle={this.handleDDToggle}
  onClear={this.handleClear}
  nonValue={nonValue}
  showIcon
  popInset={popInset}
  {...newRestProps}
>
  <ul className={`${prefixCls}-result`}>
    {result.map((item, i) => this.renderItem(item, i))}
  </ul>
</SelectDropdown>
```